@aws-amplify/ui-react-native 1.2.20 → 1.2.22

package/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx

@@ -8,7 +8,7 @@ import {
   DefaultRadioFormFields,
 } from '../../common';
 import { useFieldValues } from '../../hooks';
-import { DefaultVerifyUserComponent } from '../types';
+import { DefaultVerifyUserProps } from '../types';
 
 const COMPONENT_NAME = 'VerifyUser';
 
@@ -19,17 +19,19 @@ const {
   getAccountRecoveryInfoText,
 } = authenticatorTextUtil;
 
-const VerifyUser: DefaultVerifyUserComponent = ({
+const VerifyUser = ({
   fields,
   handleBlur,
   handleChange,
   handleSubmit,
   skipVerification,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultVerifyUserProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -37,6 +39,7 @@ const VerifyUser: DefaultVerifyUserComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getVerifyContactText();
@@ -59,6 +62,7 @@ const VerifyUser: DefaultVerifyUserComponent = ({
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

@@ -44,6 +44,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit,
+  hasValidationErrors: false,
   Header: VerifyUser.Header,
   isPending: false,
   skipVerification: jest.fn(),

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

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -28,9 +28,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -118,9 +118,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -185,9 +185,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -233,8 +233,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -328,7 +327,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -345,9 +344,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -435,9 +434,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -502,9 +501,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -609,8 +608,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

package/src/Authenticator/Defaults/types.ts

@@ -21,55 +21,69 @@ export type DefaultComponents<
   Props = {}
 > = AuthenticatorComponentDefaults<FieldType, Props>;
 
-export type DefaultConfirmResetPasswordComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmResetPasswordStyle }
->['ConfirmResetPassword'];
-
-export type DefaultConfirmSignInComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmSignInStyle }
->['ConfirmSignIn'];
-
-export type DefaultConfirmSignUpComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmSignUpStyle }
->['ConfirmSignUp'];
-
-export type DefaultConfirmVerifyUserComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmVerifyUserStyle }
->['ConfirmVerifyUser'];
-
-export type DefaultForceNewPasswordComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ForceNewPasswordStyle }
->['ForceNewPassword'];
-
-export type DefaultResetPasswordComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ResetPasswordStyle }
->['ResetPassword'];
-
-export type DefaultSetupTOTPComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: SetupTOTPStyle }
->['SetupTOTP'];
-
-export type DefaultSignInComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: SignInStyle }
->['SignIn'];
-
-export type DefaultSignUpComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: SignUpStyle }
->['SignUp'];
-
-export type DefaultVerifyUserComponent = DefaultComponents<
-  RadioFieldOptions,
-  { style?: VerifyUserStyle }
->['VerifyUser'];
+export type DefaultConfirmResetPasswordProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmResetPasswordStyle }
+  >['ConfirmResetPassword']
+>;
+
+export type DefaultConfirmSignInProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmSignInStyle }
+  >['ConfirmSignIn']
+>;
+
+export type DefaultConfirmSignUpProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmSignUpStyle }
+  >['ConfirmSignUp']
+>;
+
+export type DefaultConfirmVerifyUserProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmVerifyUserStyle }
+  >['ConfirmVerifyUser']
+>;
+
+export type DefaultForceNewPasswordProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ForceNewPasswordStyle }
+  >['ForceNewPassword']
+>;
+
+export type DefaultResetPasswordProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ResetPasswordStyle }
+  >['ResetPassword']
+>;
+
+export type DefaultSetupTOTPProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: SetupTOTPStyle }
+  >['SetupTOTP']
+>;
+
+export type DefaultSignInProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<TextFieldOptionsType, { style?: SignInStyle }>['SignIn']
+>;
+
+export type DefaultSignUpProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<TextFieldOptionsType, { style?: SignUpStyle }>['SignUp']
+>;
+
+export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    RadioFieldOptions,
+    { style?: VerifyUserStyle }
+  >['VerifyUser']
+>;
 
 /**
  * Custom Authenticator components

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

@@ -81,30 +81,27 @@ describe('Authenticator', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it.each(['authenticated', 'signOut'])(
-    'handles the %s route as expected with children',
-    (route) => {
-      useAuthenticatorSpy.mockImplementation(
-        () => ({ route } as unknown as UseAuthenticator)
-      );
+  it('handles `authStatus` of authenticated as expected', () => {
+    useAuthenticatorSpy.mockImplementation(
+      () => ({ authStatus: 'authenticated' } as unknown as UseAuthenticator)
+    );
 
-      const { getByTestId, toJSON } = render(
-        <Authenticator>
-          <TestChildren />
-        </Authenticator>
-      );
+    const { getByTestId, toJSON } = render(
+      <Authenticator>
+        <TestChildren />
+      </Authenticator>
+    );
 
-      const children = getByTestId(CHILD_TEST_ID);
+    const children = getByTestId(CHILD_TEST_ID);
 
-      expect(children.type).toBe('Text');
-      expect(children.props.children).toBe(CHILD_CONTENT);
+    expect(children.type).toBe('Text');
+    expect(children.props.children).toBe(CHILD_CONTENT);
 
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+    expect(toJSON()).toMatchSnapshot();
+  });
 
-  it.each(['authenticated', 'signOut'])(
-    'handles the %s route as expected without children',
+  it.each(['unauthenticated', 'configuring'])(
+    'handles an authStatus of %s as expected',
     (route) => {
       useAuthenticatorSpy.mockImplementation(
         () => ({ route } as unknown as UseAuthenticator)

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

@@ -59,15 +59,7 @@ exports[`Authenticator behaves as expected in the happy path 1`] = `
 </SafeAreaProvider>
 `;
 
-exports[`Authenticator handles the authenticated route as expected with children 1`] = `
-<Text
-  testID="child-test-id"
->
-  Test Children
-</Text>
-`;
-
-exports[`Authenticator handles the signOut route as expected with children 1`] = `
+exports[`Authenticator handles \`authStatus\` of authenticated as expected 1`] = `
 <Text
   testID="child-test-id"
 >

package/src/Authenticator/__tests__/withAuthenticator.spec.tsx

@@ -61,7 +61,7 @@ describe('withAuthenticator', () => {
     useAuthenticatorSpy.mockImplementation(
       () =>
         ({
-          route: 'authenticated',
+          authStatus: 'authenticated',
         } as unknown as UIReactCoreModule.UseAuthenticator)
     );
 

package/src/Authenticator/common/DefaultContent/styles.ts

@@ -12,8 +12,7 @@ export const getDefaultStyle = ({
       paddingHorizontal: space.small,
     },
     buttonPrimary: {
-      marginHorizontal: space.medium,
-      marginVertical: space.small,
+      margin: space.small,
     },
     buttonPrimaryLabel: {}, // themed value only
     buttonSecondary: {

package/src/Authenticator/common/DefaultContent/types.ts

@@ -60,10 +60,7 @@ export type DefaultContentProps<
     | TextFieldOptionsType
     | RadioFieldOptions
     | unknown = unknown
-> = Pick<
-  DefaultComponentProps<FieldsType>,
-  'error' | 'Footer' | 'isPending'
-> & {
+> = Pick<DefaultComponentProps<FieldsType>, 'error' | 'isPending'> & {
   buttons: DefaultButtons;
   body?: React.ReactNode;
   fields: FieldsType[];

package/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { censorAllButFirstAndLast, censorPhoneNumber } from '@aws-amplify/ui';
 
 import { Radio, RadioGroup } from '../../../primitives';
-import { DefaultRadioFormFieldsComponent } from './types';
+import { DefaultRadioFormFieldsProps } from './types';
 
 const censorContactInformation = (name: string, value: string): string => {
   let censoredVal = value;
@@ -17,16 +17,16 @@ const censorContactInformation = (name: string, value: string): string => {
   return censoredVal;
 };
 
-const DefaultFormFields: DefaultRadioFormFieldsComponent = ({
+const DefaultRadioFormFields = ({
   fields,
-  isPending,
   fieldContainerStyle,
   fieldLabelStyle,
+  isPending,
   style,
-}) => {
+}: DefaultRadioFormFieldsProps): JSX.Element => {
   return (
     <RadioGroup disabled={isPending} style={style}>
-      {fields.map(({ name, value, ...props }) => (
+      {(fields ?? []).map(({ name, value, ...props }) => (
         <Radio
           {...props}
           key={value}
@@ -42,4 +42,6 @@ const DefaultFormFields: DefaultRadioFormFieldsComponent = ({
   );
 };
 
-export default DefaultFormFields;
+DefaultRadioFormFields.displayName = 'FormFields';
+
+export default DefaultRadioFormFields;

package/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx

@@ -5,19 +5,22 @@ import { getErrors } from '@aws-amplify/ui';
 
 import Field from './Field';
 import { FieldErrors } from './FieldErrors';
-import { DefaultTextFormFieldsComponent } from './types';
+import {
+  // DefaultTextFormFieldsComponent,
+  DefaultTextFormFieldsProps,
+} from './types';
 
-const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({
+const DefaultTextFormFields = ({
   fieldContainerStyle,
   fieldErrorsContainer,
   fieldErrorStyle,
   fieldStyle,
-  fields = [],
-  isPending,
+  fields,
+  isPending = false,
   style,
   validationErrors,
-}) => {
-  const formFields = fields.map(({ name, type, ...field }) => {
+}: DefaultTextFormFieldsProps): JSX.Element => {
+  const formFields = (fields ?? []).map(({ name, type, ...field }) => {
     const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
 
     const hasError = errors?.length > 0;
@@ -44,6 +47,6 @@ const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({
   return <View style={style}>{formFields}</View>;
 };
 
-DefaultTextFormFields.displayName = 'DefaultTextFormFields';
+DefaultTextFormFields.displayName = 'FormFields';
 
 export default DefaultTextFormFields;

package/src/Authenticator/common/DefaultFormFields/types.ts

@@ -1,5 +1,8 @@
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core';
+import {
+  AuthenticatorFormFieldsComponent,
+  UseAuthenticator,
+} from '@aws-amplify/ui-react-core';
 
 import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks';
 
@@ -25,8 +28,15 @@ export interface DefaultFormFieldsStyle {
 export type DefaultFormFieldsComponent<FieldsType> =
   AuthenticatorFormFieldsComponent<FieldsType, DefaultFormFieldsStyle>;
 
-export type DefaultTextFormFieldsComponent =
-  DefaultFormFieldsComponent<TextFieldOptionsType>;
+interface FormFieldsProps extends DefaultFormFieldsStyle {
+  isPending?: UseAuthenticator['isPending'];
+  validationErrors?: UseAuthenticator['validationErrors'];
+}
+
+export interface DefaultTextFormFieldsProps extends FormFieldsProps {
+  fields?: TextFieldOptionsType[];
+}
 
-export type DefaultRadioFormFieldsComponent =
-  DefaultFormFieldsComponent<RadioFieldOptions>;
+export interface DefaultRadioFormFieldsProps extends FormFieldsProps {
+  fields?: RadioFieldOptions[];
+}

package/src/Authenticator/common/DefaultHeader/__tests__/__snapshots__/DefaultHeader.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`DefaultHeader renders as expected with children 1`] = `
       },
       Object {
         "fontSize": 24,
-        "fontWeight": "300",
+        "fontWeight": "500",
         "lineHeight": 36,
       },
       undefined,

package/src/Authenticator/common/FederatedProviderButton/__tests__/__snapshots__/FederatedProviderButton.spec.tsx.snap

@@ -72,9 +72,9 @@ exports[`FederatedProviderButton applies style props 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -163,9 +163,9 @@ exports[`FederatedProviderButton renders default button as expected 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",

package/src/Authenticator/common/FederatedProviderButtons/__tests__/__snapshots__/FederatedProviderButtons.spec.tsx.snap

@@ -79,9 +79,9 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
       style={
         Array [
           Object {
-            "fontSize": 14,
+            "fontSize": 16,
             "fontWeight": "400",
-            "lineHeight": 21,
+            "lineHeight": 24,
           },
           Object {
             "color": "hsl(210, 50%, 10%)",
@@ -127,9 +127,9 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
       style={
         Array [
           Object {
-            "fontSize": 14,
+            "fontSize": 16,
             "fontWeight": "400",
-            "lineHeight": 21,
+            "lineHeight": 24,
           },
           Object {
             "color": "hsl(210, 50%, 10%)",

package/src/Authenticator/hooks/types.ts

@@ -7,6 +7,7 @@ import {
 
 export type MachineFieldTypeKey = 'password' | 'tel';
 export type AuthenticatorFieldTypeKey =
+  | 'email'
   | 'password'
   | 'phone'
   | 'default'
@@ -23,10 +24,12 @@ type FieldOptions<FieldProps, Type extends AuthenticatorFieldTypeKey> = {
   type: Type;
 } & Omit<FieldProps, 'disabled' | 'onBlur'>;
 
+type EmailFieldOptions = FieldOptions<PhoneNumberFieldProps, 'email'>;
 type PasswordFieldOptions = FieldOptions<PasswordFieldProps, 'password'>;
 type PhoneFieldOptions = FieldOptions<PhoneNumberFieldProps, 'phone'>;
 type DefaultFieldOptions = FieldOptions<TextFieldProps, 'default'>;
 export type TextFieldOptionsType = (
+  | EmailFieldOptions
   | PasswordFieldOptions
   | PhoneFieldOptions
   | DefaultFieldOptions