@aws-amplify/ui-react-native 1.2.18 → 1.2.19

package/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx

@@ -31,7 +31,11 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
   resendCode,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -46,10 +50,20 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       secondary: { children: secondaryButtonText, onPress: resendCode },
     }),
-    [handleFormSubmit, primaryButtonText, resendCode, secondaryButtonText]
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      resendCode,
+      secondaryButtonText,
+    ]
   );
 
   return (

package/src/Authenticator/Defaults/ConfirmSignUp/__tests__/__snapshots__/ConfirmSignUp.spec.tsx.snap

@@ -53,6 +53,11 @@ Array [
   />,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -82,6 +87,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -204,6 +210,11 @@ Array [
   />,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -233,6 +244,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -369,6 +381,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -413,6 +426,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -442,6 +460,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx

@@ -29,7 +29,11 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
   skipVerification,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -43,10 +47,20 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       links: [{ children: secondaryButtonText, onPress: skipVerification }],
     }),
-    [handleFormSubmit, primaryButtonText, skipVerification, secondaryButtonText]
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      skipVerification,
+      secondaryButtonText,
+    ]
   );
 
   return (

package/src/Authenticator/Defaults/ConfirmVerifyUser/__tests__/__snapshots__/ConfirmVerifyUser.spec.tsx.snap

@@ -32,6 +32,11 @@ Array [
   />,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -61,6 +66,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -171,6 +177,11 @@ Array [
   />,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -200,6 +211,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -324,6 +336,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -368,6 +381,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -397,6 +415,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx

@@ -21,11 +21,16 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
   handleBlur,
   handleChange,
   handleSubmit,
+  hasValidationErrors,
   isPending,
   toSignIn,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -33,6 +38,7 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
     handleSubmit,
   });
 
+  const disabled = hasValidationErrors || disableFormSubmit;
   const headerText = getChangePasswordText();
   const primaryButtonText = isPending
     ? getChangingText()
@@ -41,10 +47,20 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       links: [{ children: secondaryButtonText, onPress: toSignIn }],
     }),
-    [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      secondaryButtonText,
+      toSignIn,
+    ]
   );
 
   return (

package/src/Authenticator/Defaults/ForceNewPassword/__tests__/ForceNewPassword.spec.tsx

@@ -13,6 +13,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ForceNewPassword.Header,
   isPending: false,
   toSignIn: jest.fn(),

package/src/Authenticator/Defaults/ForceNewPassword/__tests__/__snapshots__/ForceNewPassword.spec.tsx.snap

@@ -168,6 +168,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -212,6 +213,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -241,6 +247,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -473,6 +480,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -502,6 +514,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -766,6 +779,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -795,6 +813,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx

@@ -28,7 +28,11 @@ const ResetPassword: DefaultResetPasswordComponent = ({
   toSignIn,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -42,10 +46,20 @@ const ResetPassword: DefaultResetPasswordComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       links: [{ children: secondaryButtonText, onPress: toSignIn }],
     }),
-    [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      secondaryButtonText,
+      toSignIn,
+    ]
   );
 
   return (

package/src/Authenticator/Defaults/ResetPassword/__tests__/__snapshots__/ResetPassword.spec.tsx.snap

@@ -127,6 +127,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -171,6 +172,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -200,6 +206,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -391,6 +398,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -420,6 +432,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx

@@ -35,7 +35,11 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
   totpSecretCode,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -60,10 +64,20 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       links: [{ children: secondaryButtonText, onPress: toSignIn }],
     }),
-    [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      secondaryButtonText,
+      toSignIn,
+    ]
   );
 
   return (

package/src/Authenticator/Defaults/SetupTOTP/__tests__/__snapshots__/SetupTOTP.spec.tsx.snap

@@ -172,6 +172,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -216,6 +217,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -245,6 +251,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -481,6 +488,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -510,6 +522,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/SignIn/SignIn.tsx

@@ -30,7 +30,11 @@ const SignIn: DefaultSignInComponent = ({
     getForgotPasswordText,
   } = authenticatorTextUtil;
 
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -49,12 +53,13 @@ const SignIn: DefaultSignInComponent = ({
       onPress: toResetPassword,
     };
     return {
-      primary: { children: signInText, onPress: handleFormSubmit },
+      primary: { children: signInText, disabled, onPress: handleFormSubmit },
       links: hideSignUp
         ? [forgotPassword]
         : [forgotPassword, { children: signUpText, onPress: toSignUp }],
     };
   }, [
+    disabled,
     forgotPasswordText,
     handleFormSubmit,
     hideSignUp,

package/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap

@@ -261,6 +261,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -290,6 +295,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -677,6 +683,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -706,6 +717,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -1059,6 +1071,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -1103,6 +1116,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -1132,6 +1150,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/SignUp/SignUp.tsx

@@ -25,12 +25,17 @@ const SignUp: DefaultSignUpComponent = ({
   handleBlur,
   handleChange,
   handleSubmit,
+  hasValidationErrors,
   hideSignIn,
   isPending,
   toSignIn,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -38,6 +43,7 @@ const SignUp: DefaultSignUpComponent = ({
     handleSubmit,
   });
 
+  const disabled = hasValidationErrors || disableFormSubmit;
   const headerText = getSignUpTabText();
   const primaryButtonText = isPending
     ? getCreatingAccountText()
@@ -46,12 +52,17 @@ const SignUp: DefaultSignUpComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       links: hideSignIn
         ? undefined
         : [{ children: secondaryButtonText, onPress: toSignIn }],
     }),
     [
+      disabled,
       handleFormSubmit,
       hideSignIn,
       primaryButtonText,

package/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx

@@ -39,6 +39,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: SignUp.Header,
   isPending: false,
   socialProviders: [],