@hero-design/rn 8.112.5 → 8.113.1

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

@@ -562,19 +562,9 @@ exports[`TimePickerIOS renders correctly 1`] = `
         </View>
       </View>
     </View>
-    <RCTModalHostView
-      animationType="none"
+    <Modal
       hardwareAccelerated={false}
-      identifier={0}
-      onDismiss={[Function]}
       onRequestClose={[Function]}
-      onStartShouldSetResponder={[Function]}
-      presentationStyle="overFullScreen"
-      style={
-        {
-          "position": "absolute",
-        }
-      }
       supportedOrientations={
         [
           "portrait",
@@ -584,67 +574,156 @@ exports[`TimePickerIOS renders correctly 1`] = `
       visible={true}
     >
       <View
-        collapsable={false}
+        pointerEvents="box-none"
         style={
           [
             {
-              "flex": 1,
+              "bottom": 0,
+              "flexDirection": "column-reverse",
               "left": 0,
+              "position": "absolute",
+              "right": 0,
               "top": 0,
             },
-            {
-              "backgroundColor": "transparent",
-            },
+            undefined,
           ]
         }
       >
         <View
-          pointerEvents="box-none"
+          onLayout={[Function]}
           style={
-            {
-              "flex": 1,
-            }
+            [
+              [
+                {
+                  "flex": 1,
+                  "flexDirection": "column-reverse",
+                },
+                undefined,
+              ],
+              {
+                "paddingBottom": 0,
+              },
+            ]
           }
         >
           <View
-            collapsable={true}
-            pointerEvents="box-none"
+            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]}
             style={
               {
-                "flex": 1,
+                "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,
+                "maxHeight": "94%",
+                "transform": [
+                  {
+                    "scaleY": 1,
+                  },
+                  {
+                    "translateY": 0,
+                  },
+                ],
+                "width": "100%",
               }
             }
           >
             <View
-              pointerEvents="box-none"
               style={
                 [
                   {
-                    "bottom": 0,
-                    "flexDirection": "column-reverse",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "flexDirection": "row",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 8,
                   },
                   undefined,
                 ]
               }
             >
               <View
-                onLayout={[Function]}
                 style={
                   [
+                    {
+                      "flex": 1,
+                      "justifyContent": "center",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  style={
                     [
                       {
-                        "flex": 1,
-                        "flexDirection": "column-reverse",
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 16,
+                        "letterSpacing": 0.24,
+                        "lineHeight": 24,
                       },
                       undefined,
-                    ],
+                    ]
+                  }
+                  themeIntent="body"
+                  themeIsItalic={false}
+                  themeTypeface="neutral"
+                  themeVariant="regular-bold"
+                >
+                  Break time
+                </Text>
+              </View>
+              <View
+                style={
+                  [
                     {
-                      "paddingBottom": 0,
+                      "alignItems": "flex-end",
+                      "height": 48,
+                      "justifyContent": "center",
+                      "marginLeft": 12,
+                      "width": 48,
                     },
+                    undefined,
                   ]
                 }
               >
@@ -669,9 +748,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   accessible={true}
                   collapsable={false}
                   focusable={true}
-                  onBlur={[Function]}
                   onClick={[Function]}
-                  onFocus={[Function]}
                   onResponderGrant={[Function]}
                   onResponderMove={[Function]}
                   onResponderRelease={[Function]}
@@ -680,273 +757,151 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   onStartShouldSetResponder={[Function]}
                   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,
-                      "maxHeight": "94%",
-                      "transform": [
-                        {
-                          "scaleY": 1,
-                        },
-                        {
-                          "translateY": 0,
-                        },
-                      ],
-                      "width": "100%",
+                      "opacity": 1,
                     }
                   }
+                  testID="bottom-sheet-close-icon"
                 >
-                  <View
+                  <HeroIcon
+                    name="cancel"
                     style={
                       [
                         {
-                          "flexDirection": "row",
-                          "paddingHorizontal": 16,
-                          "paddingVertical": 8,
+                          "color": "#001f23",
+                          "fontSize": 16,
                         },
                         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"
-                        themeIsItalic={false}
-                        themeTypeface="neutral"
-                        themeVariant="regular-bold"
-                      >
-                        Break time
-                      </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"
-                          style={
-                            [
-                              {
-                                "color": "#001f23",
-                                "fontSize": 16,
-                              },
-                              undefined,
-                            ]
-                          }
-                          themeIntent="text"
-                          themeSize="xsmall"
-                        />
-                      </View>
-                    </View>
-                  </View>
-                  <View
+                    themeIntent="text"
+                    themeSize="xsmall"
+                  />
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "height": 176,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Picker
+                display="spinner"
+                locale="en-US"
+                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": 999,
+                        "borderWidth": 0,
+                        "flexDirection": "row",
+                        "height": 60,
+                        "justifyContent": "center",
+                        "padding": 12,
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    disabled={false}
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
                     style={
                       [
                         {
-                          "alignItems": "center",
-                          "height": 176,
+                          "color": "#001f23",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "letterSpacing": 0.24,
+                          "lineHeight": 24,
                         },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Picker
-                      display="spinner"
-                      locale="en-US"
-                      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,
+                            "color": "#401960",
+                            "flexShrink": 1,
+                            "lineHeight": 22,
+                            "textAlign": "center",
+                            "textAlignVertical": "center",
                           },
                           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": 999,
-                              "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",
-                                  "textAlignVertical": "center",
-                                },
-                                undefined,
-                              ],
-                            ]
-                          }
-                          themeButtonVariant="text-primary"
-                          themeIntent="body"
-                          themeIsCompact={false}
-                          themeIsItalic={false}
-                          themeIsPressed={false}
-                          themeTypeface="neutral"
-                          themeVariant="regular-bold"
-                        >
-                          Confirm
-                        </Text>
-                      </View>
-                    </View>
-                  </View>
-                </RCTSafeAreaView>
+                        ],
+                      ]
+                    }
+                    themeButtonVariant="text-primary"
+                    themeIntent="body"
+                    themeIsCompact={false}
+                    themeIsItalic={false}
+                    themeIsPressed={false}
+                    themeTypeface="neutral"
+                    themeVariant="regular-bold"
+                  >
+                    Confirm
+                  </Text>
+                </View>
               </View>
             </View>
-          </View>
+          </RCTSafeAreaView>
         </View>
       </View>
-    </RCTModalHostView>
+    </Modal>
   </View>
   <View
     pointerEvents="box-none"

package/src/components/TimePicker/types.ts

@@ -24,7 +24,7 @@ export interface TimePickerProps {
   confirmLabel: string;
   /**
    * Time display format of current value presented on the input. Default format is: HH:mm aa.
-   * Following date-fns's format (https://date-fns.org/v4.1.0/docs/format).
+   * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
    * This also change how the time picker display between 24 hour and 12 hour mode.
    */
   displayFormat?: string;

package/src/components/Toast/Toast.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { Animated, LayoutAnimation } from 'react-native';
 import {
@@ -53,7 +54,7 @@ const Toast = ({
   actionLabel,
   onDismiss,
   distance = 0,
-}: ToastProps): JSX.Element => {
+}: ToastProps): ReactElement => {
   const animatedValue = useRef(new Animated.Value(0)).current;
   const toastConfig = useToastConfig();
 

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
@@ -78,7 +79,7 @@ const ToolbarItemContent = ({
   label,
   intent = 'primary',
   disabled = false,
-}: ToolbarItemContentProps): JSX.Element | null => {
+}: ToolbarItemContentProps): ReactElement | null => {
   if (icon) {
     return (
       <IconItem icon={icon} intent={intent} disabled={disabled} label={label} />

package/src/components/Typography/Label/index.tsx

@@ -8,7 +8,7 @@ import type {
 import { StyledLabel } from './StyledLabel';
 import type { TypographyIntent } from '../types';
 
-interface LabelProps extends NativeTextProps {
+export interface LabelProps extends NativeTextProps {
   /**
    * Text content.
    */

package/src/testHelpers/renderWithTheme.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import { render } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
 import type { RenderOptions } from '@testing-library/react-native';
@@ -5,7 +6,7 @@ import { theme } from '../index';
 import HeroDesignProvider from '../components/HeroDesignProvider';
 import enAU from '../locales/en_AU';
 
-const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>
+const renderWithTheme = (ui: ReactElement, options?: RenderOptions) =>
   render(
     <HeroDesignProvider theme={theme} locale={enAU}>
       {ui}