@hero-design/rn 8.42.4 → 8.43.1

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

@@ -4,7 +4,19 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -229,40 +241,65 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
 `;
 
 exports[`TimePickerIOS renders correctly 1`] = `
-[
-  <View
-    accessibilityState={
-      {
-        "disabled": false,
-      }
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "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,
     }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="none"
+    testID="timePickerInputIOS"
   >
     <View
-      pointerEvents="none"
-      testID="timePickerInputIOS"
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "marginTop": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
     >
       <View
-        pointerEvents="auto"
         style={
           [
             {
-              "marginTop": 8,
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "flexDirection": "row",
+              "padding": 16,
             },
             undefined,
           ]
@@ -272,444 +309,274 @@ exports[`TimePickerIOS renders correctly 1`] = `
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
+                "borderColor": "#001f23",
                 "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              [
+                {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="text-input-border"
+          themeFocused={false}
+          themeState="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            [
+              {
+                "backgroundColor": "#ffffff",
                 "flexDirection": "row",
-                "padding": 16,
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -4,
+                "zIndex": 1,
+              },
+              {
+                "backgroundColor": "#ffffff",
               },
-              undefined,
             ]
           }
+          testID="label-container"
         >
-          <View
+          <Text
+            allowFontScaling={false}
             style={
               [
                 {
-                  "borderColor": "#001f23",
-                  "borderRadius": 8,
-                  "borderWidth": 1,
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 [
+                  {
+                    "color": "#001f23",
+                    "lineHeight": 12,
+                  },
                   {
                     "backgroundColor": "#ffffff",
                   },
-                  undefined,
                 ],
               ]
             }
-            testID="text-input-border"
-            themeFocused={false}
+            testID="input-label"
+            themeFontWeight="regular"
+            themeIntent="body"
             themeState="filled"
-          />
-          <View
-            pointerEvents="none"
-            style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
-            }
-            testID="label-container"
           >
-            <Text
-              allowFontScaling={false}
-              style={
-                [
-                  {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
-                    "letterSpacing": 0.48,
-                    "lineHeight": 16,
-                  },
-                  [
-                    {
-                      "color": "#001f23",
-                      "lineHeight": 12,
-                    },
-                    {
-                      "backgroundColor": "#ffffff",
-                    },
-                  ],
-                ]
+            Break time
+          </Text>
+        </View>
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "flexGrow": 2,
+                "flexShrink": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              {
+                "disabled": false,
               }
-              testID="input-label"
-              themeFontWeight="regular"
-              themeIntent="body"
-              themeState="filled"
-            >
-              Break time
-            </Text>
-          </View>
-          <View
+            }
+            allowFontScaling={false}
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            placeholder=" "
             style={
               [
                 {
-                  "alignItems": "center",
                   "alignSelf": "stretch",
-                  "flexDirection": "row",
                   "flexGrow": 2,
-                  "flexShrink": 1,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
+                  "marginHorizontal": 8,
+                  "maxHeight": 144,
+                  "paddingVertical": 0,
+                  "textAlignVertical": "center",
                 },
-                undefined,
-              ]
-            }
-          >
-            <TextInput
-              accessibilityState={
-                {
-                  "disabled": false,
-                }
-              }
-              allowFontScaling={false}
-              editable={true}
-              onBlur={[Function]}
-              onChangeText={[Function]}
-              onFocus={[Function]}
-              placeholder=" "
-              style={
-                [
-                  {
-                    "alignSelf": "stretch",
-                    "flexGrow": 2,
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "height": undefined,
-                    "marginHorizontal": 8,
-                    "maxHeight": 144,
-                    "paddingVertical": 0,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "backgroundColor": "#ffffff",
-                    "color": "#001f23",
-                  },
-                ]
-              }
-              testID="text-input"
-              themeVariant="text"
-              value="03:24 AM"
-            />
-          </View>
-          <HeroIcon
-            name="clock-3"
-            style={
-              [
                 {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
-                  "fontSize": 24,
                 },
-                undefined,
               ]
             }
-            testID="input-suffix"
-            themeIntent="text"
-            themeSize="medium"
+            testID="text-input"
+            themeVariant="text"
+            value="03:24 AM"
           />
         </View>
+        <HeroIcon
+          name="clock-3"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 24,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="medium"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "minHeight": 16,
+              "paddingLeft": 16,
+              "paddingTop": 2,
+            },
+            undefined,
+          ]
+        }
+      >
         <View
           style={
             [
               {
-                "minHeight": 16,
-                "paddingLeft": 16,
-                "paddingTop": 2,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
               },
               undefined,
             ]
           }
-        >
-          <View
-            style={
-              [
-                {
-                  "flexDirection": "row",
-                  "justifyContent": "space-between",
-                },
-                undefined,
-              ]
-            }
-          />
-        </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}
+  </View>
+  <RCTModalHostView
+    animationType="none"
+    hardwareAccelerated={false}
+    identifier={0}
+    onDismiss={[Function]}
+    onRequestClose={[Function]}
+    onStartShouldSetResponder={[Function]}
+    presentationStyle="overFullScreen"
     style={
       {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
         "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
       }
     }
+    transparent={true}
+    visible={true}
   >
     <View
-      pointerEvents="box-none"
+      collapsable={false}
       style={
         [
           {
-            "bottom": 0,
-            "flexDirection": "column-reverse",
+            "flex": 1,
             "left": 0,
-            "position": "absolute",
-            "right": 0,
             "top": 0,
           },
-          undefined,
+          {
+            "backgroundColor": "transparent",
+          },
         ]
       }
     >
       <View
-        onLayout={[Function]}
+        pointerEvents="box-none"
         style={
-          [
-            [
-              {
-                "flex": 1,
-                "flexDirection": "column-reverse",
-              },
-              undefined,
-            ],
-            {
-              "paddingBottom": 0,
-            },
-          ]
+          {
+            "flex": 1,
+          }
         }
       >
         <View
-          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={
-            {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0.48,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <RCTSafeAreaView
-          collapsable={false}
-          emulateUnlessSupported={true}
+          collapsable={true}
+          pointerEvents="box-none"
           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
+            pointerEvents="box-none"
             style={
               [
                 {
-                  "flexDirection": "row",
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
+                  "bottom": 0,
+                  "flexDirection": "column-reverse",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 undefined,
               ]
             }
           >
             <View
+              onLayout={[Function]}
               style={
                 [
-                  {
-                    "flex": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                style={
                   [
                     {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-SemiBold",
-                      "fontSize": 16,
-                      "letterSpacing": 0.24,
-                      "lineHeight": 24,
+                      "flex": 1,
+                      "flexDirection": "column-reverse",
                     },
                     undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular-bold"
-              >
-                Break time
-              </Text>
-            </View>
-            <View
-              style={
-                [
+                  ],
                   {
-                    "alignItems": "center",
-                    "height": 48,
-                    "justifyContent": "center",
-                    "marginLeft": 12,
-                    "width": 48,
+                    "paddingBottom": 0,
                   },
-                  undefined,
                 ]
               }
             >
               <View
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
+                accessibilityState={
                   {
-                    "opacity": 1,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
-                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={
-                [
+                accessibilityValue={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "flex-end",
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 2,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityState={
-                  {
-                    "disabled": false,
+                    "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]}
@@ -717,58 +584,274 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "backgroundColor": "transparent",
-                      "borderRadius": 4,
-                      "borderWidth": 0,
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "padding": 12,
+                  {
+                    "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,
                     },
-                    undefined,
-                  ]
+                    "shadowOpacity": 0.4,
+                    "shadowRadius": 16,
+                    "transform": [
+                      {
+                        "scaleY": 1,
+                      },
+                      {
+                        "translateY": 0,
+                      },
+                    ],
+                    "width": "100%",
+                  }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  disabled={false}
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
+                <View
                   style={
                     [
                       {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.24,
-                        "lineHeight": 24,
+                        "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={
                       [
                         {
-                          "color": "#401960",
-                          "flexShrink": 1,
-                          "lineHeight": 22,
-                          "textAlign": "center",
+                          "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,
                     ]
                   }
-                  themeButtonVariant="text-primary"
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                  themeVariant="regular-bold"
                 >
-                  Confirm
-                </Text>
-              </View>
+                  <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>
-        </RCTSafeAreaView>
+        </View>
       </View>
     </View>
-  </View>,
-]
+  </RCTModalHostView>
+</View>
 `;