@hero-design/rn 7.23.0 → 7.25.0

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -1,37 +1,27 @@
-import { fireEvent, within } from "@testing-library/react-native";
-import React from "react";
-import { theme } from "../../..";
-import renderWithTheme from "../../../testHelpers/renderWithTheme";
-import Icon from "../../Icon";
-import TextInput, { getVariant } from "../index";
-
-describe("getVariant", () => {
+import { fireEvent, within } from '@testing-library/react-native';
+import React from 'react';
+import { theme } from '../../..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Icon from '../../Icon';
+import TextInput, { getVariant } from '../index';
+
+describe('getVariant', () => {
   it.each`
-    disabled | error                       | editable | loading  | isFocused | isEmptyValue | expected
-    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${true}      | ${"default"}
-    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${false}     | ${"filled"}
-    ${false} | ${undefined}                | ${true}  | ${false} | ${true}   | ${true}      | ${"focused"}
-    ${false} | ${undefined}                | ${false} | ${true}  | ${true}   | ${true}      | ${"readonly"}
-    ${false} | ${"This field is required"} | ${false} | ${false} | ${true}   | ${true}      | ${"error"}
-    ${true}  | ${"This field is required"} | ${false} | ${false} | ${true}   | ${true}      | ${"disabled"}
+    disabled | error                       | editable | loading  | isEmptyValue | expected
+    ${false} | ${undefined}                | ${true}  | ${false} | ${true}      | ${'default'}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}     | ${'filled'}
+    ${false} | ${undefined}                | ${false} | ${true}  | ${true}      | ${'readonly'}
+    ${false} | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'error'}
+    ${true}  | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'disabled'}
   `(
-    "should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue",
-    ({
-      disabled,
-      error,
-      editable,
-      loading,
-      isFocused,
-      isEmptyValue,
-      expected,
-    }) => {
+    'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isEmptyValue $isEmptyValue',
+    ({ disabled, error, editable, loading, isEmptyValue, expected }) => {
       expect(
         getVariant({
           disabled,
           error,
           editable,
           loading,
-          isFocused,
           isEmptyValue,
         })
       ).toBe(expected);
@@ -39,9 +29,9 @@ describe("getVariant", () => {
   );
 });
 
-describe("TextInput", () => {
-  describe("idle", () => {
-    it("renders correctly", () => {
+describe('TextInput', () => {
+  describe('idle', () => {
+    it('renders correctly', () => {
       const { getByTestId, toJSON } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -53,25 +43,25 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(getByTestId("idle-text-input")).toBeTruthy();
+      expect(getByTestId('idle-text-input')).toBeTruthy();
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("text-input")
+        within(getByTestId('idle-text-input')).queryAllByTestId('text-input')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByText("Amount (AUD)")
+        within(getByTestId('idle-text-input')).queryAllByText('Amount (AUD)')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-label")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-prefix")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-prefix')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-suffix")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
     });
 
-    it("should not render input-label if label is empty", () => {
+    it('should not render input-label if label is empty', () => {
       const { getByTestId } = renderWithTheme(
         <TextInput
           prefix="dollar-sign"
@@ -80,13 +70,13 @@ describe("TextInput", () => {
         />
       );
 
-      expect(getByTestId("idle-text-input")).toBeTruthy();
+      expect(getByTestId('idle-text-input')).toBeTruthy();
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-label")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
       ).toHaveLength(0);
     });
 
-    it("onChangeText, onBlur, onFocus", () => {
+    it('onChangeText, onBlur, onFocus', () => {
       const onChangeText = jest.fn();
       const onBlur = jest.fn();
       const onFocus = jest.fn();
@@ -102,23 +92,23 @@ describe("TextInput", () => {
         />
       );
 
-      const testInput = within(getByTestId("idle-text-input")).getByTestId(
-        "text-input"
+      const testInput = within(getByTestId('idle-text-input')).getByTestId(
+        'text-input'
       );
 
-      fireEvent.changeText(testInput, "Thong Quach");
-      expect(onChangeText).toHaveBeenCalledWith("Thong Quach");
+      fireEvent.changeText(testInput, 'Thong Quach');
+      expect(onChangeText).toHaveBeenCalledWith('Thong Quach');
 
-      fireEvent(testInput, "blur");
+      fireEvent(testInput, 'blur');
       expect(onBlur).toHaveBeenCalledTimes(1);
 
-      fireEvent(testInput, "focus");
+      fireEvent(testInput, 'focus');
       expect(onFocus).toHaveBeenCalledTimes(1);
     });
   });
 
-  describe("idle with suffix and prefix are React Element", () => {
-    it("renders correctly", () => {
+  describe('idle with suffix and prefix are React Element', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -129,16 +119,16 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("*")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("prefix-element")).toHaveLength(1);
-      expect(queryAllByTestId("suffix-element")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('*')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('prefix-element')).toHaveLength(1);
+      expect(queryAllByTestId('suffix-element')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
     });
   });
-  describe("required", () => {
-    it("renders correctly", () => {
+  describe('required', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -149,17 +139,17 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("*")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
-      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('*')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
     });
   });
 
-  describe("filled", () => {
-    it("renders correctly", () => {
+  describe('filled', () => {
+    it('renders correctly', () => {
       const {
         toJSON,
         queryAllByTestId,
@@ -175,17 +165,17 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByDisplayValue("100")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
-      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByDisplayValue('100')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
     });
   });
 
-  describe("readonly", () => {
-    it("renders correctly", () => {
+  describe('readonly', () => {
+    it('renders correctly', () => {
       const onChangeText = jest.fn();
       const {
         toJSON,
@@ -206,31 +196,31 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByDisplayValue("100")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
-      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
-
-      expect(getByTestId("text-input")).not.toHaveProp("editable", "false");
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByDisplayValue('100')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      expect(getByTestId('text-input')).not.toHaveProp('editable', 'false');
     });
   });
 
-  describe("loading", () => {
-    it("renders correctly", () => {
+  describe('loading', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, getByTestId } = renderWithTheme(
         <TextInput suffix="arrow-down" loading />
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
-      expect(getByTestId("input-suffix")).toHaveProp("name", "loading");
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
     });
   });
 
-  describe("max length", () => {
-    it("renders correctly", () => {
+  describe('max length', () => {
+    it('renders correctly', () => {
       const {
         toJSON,
         queryAllByTestId,
@@ -249,18 +239,18 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Shout out")).toHaveLength(1);
-      expect(queryAllByDisplayValue("shout out Tung Van")).toHaveLength(1);
-      expect(queryAllByText("18/255")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Shout out')).toHaveLength(1);
+      expect(queryAllByDisplayValue('shout out Tung Van')).toHaveLength(1);
+      expect(queryAllByText('18/255')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
 
-      expect(getByTestId("text-input")).not.toHaveProp("multiline", "true");
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
   });
 
-  describe("disabled", () => {
-    it("renders correctly", () => {
+  describe('disabled', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, queryAllByText, getByTestId } =
         renderWithTheme(
           <TextInput
@@ -273,17 +263,17 @@ describe("TextInput", () => {
         );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
-      expect(getByTestId("disabled-text-input")).toBeDisabled();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('disabled-text-input')).toBeDisabled();
 
-      expect(getByTestId("text-input")).not.toHaveProp("multiline", "true");
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
   });
 
-  describe("error", () => {
-    it("renders correctly", () => {
+  describe('error', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -294,12 +284,12 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("This field is required")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This field is required')).toHaveLength(1);
     });
   });
-  describe("helper text", () => {
-    it("renders correctly", () => {
+  describe('helper text', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -310,14 +300,14 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("This is helper text")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This is helper text')).toHaveLength(1);
     });
   });
 
-  describe("placeholder", () => {
-    describe("TextInput is idle", () => {
-      it("renders correctly", () => {
+  describe('placeholder', () => {
+    describe('TextInput is idle', () => {
+      it('renders correctly', () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -329,20 +319,20 @@ describe("TextInput", () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeFalsy();
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
 
-        fireEvent(wrapper.getByTestId("text-input"), "focus");
-        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeTruthy();
+        fireEvent(wrapper.getByTestId('text-input'), 'focus');
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
 
-        fireEvent(wrapper.getByTestId("text-input"), "blur");
-        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeFalsy();
+        fireEvent(wrapper.getByTestId('text-input'), 'blur');
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
       });
     });
   });
 
-  describe("defaultValue", () => {
-    describe("TextInput is idle", () => {
-      it("renders correctly", () => {
+  describe('defaultValue', () => {
+    describe('TextInput is idle', () => {
+      it('renders correctly', () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -356,13 +346,13 @@ describe("TextInput", () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByDisplayValue("1000")).toBeTruthy();
-        expect(wrapper.queryByText("4/255")).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('1000')).toBeTruthy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
       });
     });
 
-    describe("default Value and Value", () => {
-      it("renders correctly with 2000", () => {
+    describe('default Value and Value', () => {
+      it('renders correctly with 2000', () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -377,9 +367,9 @@ describe("TextInput", () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByDisplayValue("2000")).toBeTruthy();
-        expect(wrapper.queryByDisplayValue("1000")).toBeFalsy();
-        expect(wrapper.queryByText("4/255")).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
       });
     });
   });

package/src/components/TextInput/index.tsx

@@ -104,7 +104,6 @@ export const getVariant = ({
   error,
   editable,
   loading,
-  isFocused,
   isEmptyValue,
 }: {
   disabled?: boolean;
@@ -123,9 +122,6 @@ export const getVariant = ({
   if (!editable || loading) {
     return 'readonly';
   }
-  if (isFocused) {
-    return 'focused';
-  }
   if (!isEmptyValue) {
     return 'filled';
   }
@@ -195,6 +191,7 @@ const TextInput = ({
     accessibilityState: {
       disabled: variant === 'disabled' || variant === 'readonly',
     },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     accessibilityLabelledBy,
     ...nativeProps,
@@ -213,7 +210,8 @@ const TextInput = ({
       nativeProps.onChangeText?.(text);
     },
     defaultValue,
-    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
+    placeholder:
+      isFocused || label === undefined ? nativeProps.placeholder : undefined,
   };
 
   return (
@@ -225,7 +223,11 @@ const TextInput = ({
       testID={testID}
     >
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} style={borderStyle} />
+        <StyledBorderBackDrop
+          themeFocused={isFocused}
+          themeVariant={variant}
+          style={borderStyle}
+        />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

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

@@ -61,6 +61,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View
@@ -138,6 +139,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                   "flexGrow": 2,
                   "fontSize": 14,
                   "marginHorizontal": 8,
+                  "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
                 Object {

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

@@ -61,6 +61,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View
@@ -138,6 +139,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "flexGrow": 2,
                   "fontSize": 14,
                   "marginHorizontal": 8,
+                  "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
                 Object {
@@ -251,32 +253,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
               ]
             }
           >
-            <View
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              nativeID="animatedComponent"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#001f23",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0.48,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            />
             <View
               onLayout={[Function]}
               style={
@@ -294,6 +270,32 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 ]
               }
             >
+              <View
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                nativeID="animatedComponent"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#001f23",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0.48,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              />
               <RCTSafeAreaView
                 collapsable={false}
                 emulateUnlessSupported={true}
@@ -502,7 +504,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "#001f23",
+                              "color": "#401960",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
                               "letterSpacing": 0.48,

package/src/components/Toast/Toast.tsx

@@ -66,9 +66,6 @@ const Toast = ({
 
       return () => clearTimeout(id);
     }
-
-    // Consistent return
-    return () => {};
   }, []);
 
   useEffect(() => {

package/src/components/Toast/ToastProvider.tsx

@@ -20,6 +20,7 @@ const ToastProvider = ({
   position = 'top',
 }: ToastProviderProps) => {
   const toastRef = useRef<ToastControllerContextType>(null);
+  // @ts-expect-error: TODO: @tungv Fix this type error
   const [refState, setRefState] = useState<ToastControllerContextType>(null);
 
   useEffect(() => {

package/src/components/Toast/__tests__/index.spec.tsx

@@ -70,7 +70,7 @@ describe('Toast', () => {
   it(`"hide" method works correctly`, () => {
     const Component = () => {
       const toast = Toast.useToast();
-      const [id, setId] = useState(null);
+      const [id, setId] = useState('');
 
       useEffect(() => {
         const toastId = toast.show({