@hero-design/rn 7.21.0 → 7.22.1

package/src/components/TextInput/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
+import React from "react";
+import { StyleSheet } from "react-native";
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-} from 'react-native';
+} from "react-native";
 import {
   StyledTextInputContainer,
   StyledLabel,
@@ -24,11 +24,11 @@ import {
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
-} from './StyledTextInput';
-import Icon from '../Icon';
-import { useTheme } from '../../theme';
-import type { Variant } from './StyledTextInput';
-import type { IconName } from '../Icon';
+} from "./StyledTextInput";
+import Icon from "../Icon";
+import { useTheme } from "../../theme";
+import type { Variant } from "./StyledTextInput";
+import type { IconName } from "../Icon";
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -114,21 +114,21 @@ export const getVariant = ({
   isEmptyValue?: boolean;
 }): Variant => {
   if (disabled) {
-    return 'disabled';
+    return "disabled";
   }
   if (error) {
-    return 'error';
+    return "error";
   }
   if (!editable || loading) {
-    return 'readonly';
+    return "readonly";
   }
   if (isFocused) {
-    return 'focused';
+    return "focused";
   }
   if (!isEmptyValue) {
-    return 'filled';
+    return "filled";
   }
-  return 'default';
+  return "default";
 };
 
 const TextInput = ({
@@ -151,9 +151,9 @@ const TextInput = ({
   renderInputValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
-  const displayText = (value !== undefined ? value : defaultValue) ?? '';
+  const displayText = (value !== undefined ? value : defaultValue) ?? "";
   const isEmptyValue = displayText.length === 0;
-  const actualSuffix = loading ? 'loading' : suffix;
+  const actualSuffix = loading ? "loading" : suffix;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -175,41 +175,40 @@ const TextInput = ({
       { color: theme.__hd__.textInput.colors.text },
       textStyle,
     ]),
-    testID: 'text-input',
+    testID: "text-input",
     accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly',
+      disabled: variant === "disabled" || variant === "readonly",
     },
     // @ts-ignore
     accessibilityLabelledBy,
     ...nativeProps,
-    onFocus: event => {
+    onFocus: (event) => {
       setIsFocused(true);
       nativeProps.onFocus?.(event);
     },
-    onBlur: event => {
+    onBlur: (event) => {
       setIsFocused(false);
       nativeProps.onBlur?.(event);
     },
     editable,
     maxLength,
     value,
-    onChangeText: text => {
+    onChangeText: (text) => {
       nativeProps.onChangeText?.(text);
     },
     defaultValue,
-    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
+    placeholder: variant === "focused" ? nativeProps.placeholder : undefined,
   };
 
   return (
     <StyledContainer
-      style={style}
       pointerEvents={
-        variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
+        variant === "disabled" || variant === "readonly" ? "none" : "auto"
       }
       testID={testID}
     >
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} />
+        <StyledBorderBackDrop themeVariant={variant} style={style} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (
@@ -229,9 +228,9 @@ const TextInput = ({
             )}
           </StyledLabelContainer>
         )}
-        {typeof prefix === 'string' ? (
+        {typeof prefix === "string" ? (
           <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+            intent={variant === "disabled" ? "disabled-text" : "text"}
             testID="input-prefix"
             icon={prefix}
             size="xsmall"
@@ -265,12 +264,12 @@ const TextInput = ({
             <StyledTextInput {...nativeInputProps} />
           )}
         </StyledTextInputAndLabelContainer>
-        {typeof actualSuffix === 'string' ? (
+        {typeof actualSuffix === "string" ? (
           <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+            intent={variant === "disabled" ? "disabled-text" : "text"}
             testID="input-suffix"
             icon={actualSuffix}
-            spin={actualSuffix === 'loading'}
+            spin={actualSuffix === "loading"}
             size="xsmall"
           />
         ) : (

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

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

package/src/components/Toast/ToastContainer.tsx

@@ -28,7 +28,7 @@ const SingleToastDisplay = ({
       key={toast.id}
       style={{ marginBottom: theme.space.small }}
       onDismiss={() => {
-        setToastList(state => state.filter(item => item.id !== toast.id));
+        setToastList((state) => state.filter((item) => item.id !== toast.id));
         toast.props.onDismiss?.();
       }}
     />
@@ -43,17 +43,17 @@ const ToastContainer = React.forwardRef<
   const [toastList, setToastList] = useState<ToastItemProps[]>([]);
 
   useImperativeHandle(ref, () => ({
-    show: props => {
+    show: (props) => {
       const item = {
         id: generateID(),
         props,
       };
 
-      setToastList(state => [item, ...state]);
+      setToastList((state) => [item, ...state]);
       return item.id;
     },
-    hide: id => {
-      setToastList(state => state.filter(item => item.id !== id));
+    hide: (id) => {
+      setToastList((state) => state.filter((item) => item.id !== id));
     },
     clearAll: () => {
       setToastList([]);
@@ -75,7 +75,7 @@ const ToastContainer = React.forwardRef<
             key={id}
             style={{ marginBottom: theme.space.small }}
             onDismiss={() => {
-              setToastList(state => state.filter(item => item.id !== id));
+              setToastList((state) => state.filter((item) => item.id !== id));
               props.onDismiss?.();
             }}
           />

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

@@ -621,20 +621,26 @@ Object {
           "disabled-unchecked": "#ccced1",
           "unchecked": "#808f91",
         },
+        "selector": Object {
+          "background": "#f6f6f7",
+          "textBackground": "#401960",
+        },
         "thumb": "#ffffff",
       },
-      "heights": Object {
-        "medium": 28.799999999999997,
-        "small": 24,
-      },
       "radii": Object {
         "rounded": 999,
+        "selector": Object {
+          "default": 999,
+        },
       },
       "sizes": Object {
         "heights": Object {
           "medium": 32,
           "small": 24,
         },
+        "selector": Object {
+          "height": 56,
+        },
         "thumbs": Object {
           "medium": 24,
           "small": 16,
@@ -646,16 +652,12 @@ Object {
       },
       "spaces": Object {
         "medium": 4,
+        "selector": Object {
+          "iconPadding": 16,
+          "wrapperPadding": 4,
+        },
         "small": 4,
       },
-      "thumbSizes": Object {
-        "medium": 20.8,
-        "small": 16,
-      },
-      "widths": Object {
-        "medium": 56,
-        "small": 48,
-      },
     },
     "tabs": Object {
       "borderWidths": Object {