@aws-amplify/ui-react-native 1.2.14 → 1.2.16

package/.eslintrc.js

@@ -1,9 +1,9 @@
 module.exports = {
   ignorePatterns: ['dist', '.eslintrc.js', '*.config.js', 'jest.setup.js'],
-  extends: ['amplify-ui/react'],
+  extends: ['@aws-amplify/amplify-ui/react'],
   overrides: [
     {
-      extends: ['amplify-ui/jest'],
+      extends: ['@aws-amplify/amplify-ui/jest'],
       files: ['**/__mocks__/**', '**/__tests__/**'],
     },
   ],

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @aws-amplify/ui-react-native
 
+## 1.2.16
+
+### Patch Changes
+
+- [#3806](https://github.com/aws-amplify/amplify-ui/pull/3806) [`998a8c74f`](https://github.com/aws-amplify/amplify-ui/commit/998a8c74ff42c250d0d028efb20afa2d54528c86) Thanks [@calebpollman](https://github.com/calebpollman)! - fix(ui): add event callbacks to defaultAuthHubHandler
+
+- Updated dependencies [[`998a8c74f`](https://github.com/aws-amplify/amplify-ui/commit/998a8c74ff42c250d0d028efb20afa2d54528c86), [`82f3968b7`](https://github.com/aws-amplify/amplify-ui/commit/82f3968b7f750f069bda4ad7bfa9c34d7ee6091f)]:
+  - @aws-amplify/ui-react-core@2.1.21
+  - @aws-amplify/ui@5.6.2
+
+## 1.2.15
+
+### Patch Changes
+
+- Updated dependencies [[`4ca838978`](https://github.com/aws-amplify/amplify-ui/commit/4ca838978d23a086f80859a7cb57f184ff49e2d4), [`d6a3676f2`](https://github.com/aws-amplify/amplify-ui/commit/d6a3676f2295ed39fa83b9d31a9540f3437ba129), [`37d63424e`](https://github.com/aws-amplify/amplify-ui/commit/37d63424e23e971713f76d201ce829ec6974fc54)]:
+  - @aws-amplify/ui@5.6.1
+  - @aws-amplify/ui-react-core@2.1.20
+
 ## 1.2.14
 
 ### Patch Changes

package/README.md

@@ -7,7 +7,7 @@ Amplify UI is an open-source UI library with cloud-connected components that are
 3. Data-bound components that make it easy to display dynamic data, like DataStoreCollections.
 4. Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.
 
-## React Native Documentation
+## React Native Documentation 📖
 
 - https://ui.docs.amplify.aws/react-native
 
@@ -18,6 +18,6 @@ Amplify UI is an open-source UI library with cloud-connected components that are
 - **Accessible** Amplify UI components follow [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) and [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) best practices and guidelines such as color contrast, keyboard navigation, accessible labels, and focus management.
 - **Primitive components (React only right now)** Primitive components are used in the connected components, like Authenticator, you can also customize them and use them to build the rest of your UI.
 
-## We love contributors!!
+## We love contributors!! ✨
 
 See our contributing guide [CONTRIBUTING.md](/CONTRIBUTING.md) to help us scale Amplify UI!

package/dist/Authenticator/Defaults/types.d.ts

@@ -20,69 +20,69 @@ export interface SignUpStyle {
 }
 export interface VerifyUserStyle {
 }
-export declare type DefaultComponents<FieldType = {}, Props = {}> = AuthenticatorComponentDefaults<FieldType, Props>;
-export declare type DefaultConfirmResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultComponents<FieldType = {}, Props = {}> = AuthenticatorComponentDefaults<FieldType, Props>;
+export type DefaultConfirmResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmResetPasswordStyle;
 }>['ConfirmResetPassword'];
-export declare type DefaultConfirmSignInComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultConfirmSignInComponent = DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmSignInStyle;
 }>['ConfirmSignIn'];
-export declare type DefaultConfirmSignUpComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultConfirmSignUpComponent = DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmSignUpStyle;
 }>['ConfirmSignUp'];
-export declare type DefaultConfirmVerifyUserComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultConfirmVerifyUserComponent = DefaultComponents<TextFieldOptionsType, {
     style?: ConfirmVerifyUserStyle;
 }>['ConfirmVerifyUser'];
-export declare type DefaultForceNewPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultForceNewPasswordComponent = DefaultComponents<TextFieldOptionsType, {
     style?: ForceNewPasswordStyle;
 }>['ForceNewPassword'];
-export declare type DefaultResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultResetPasswordComponent = DefaultComponents<TextFieldOptionsType, {
     style?: ResetPasswordStyle;
 }>['ResetPassword'];
-export declare type DefaultSetupTOTPComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultSetupTOTPComponent = DefaultComponents<TextFieldOptionsType, {
     style?: SetupTOTPStyle;
 }>['SetupTOTP'];
-export declare type DefaultSignInComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultSignInComponent = DefaultComponents<TextFieldOptionsType, {
     style?: SignInStyle;
 }>['SignIn'];
-export declare type DefaultSignUpComponent = DefaultComponents<TextFieldOptionsType, {
+export type DefaultSignUpComponent = DefaultComponents<TextFieldOptionsType, {
     style?: SignUpStyle;
 }>['SignUp'];
-export declare type DefaultVerifyUserComponent = DefaultComponents<RadioFieldOptions, {
+export type DefaultVerifyUserComponent = DefaultComponents<RadioFieldOptions, {
     style?: VerifyUserStyle;
 }>['VerifyUser'];
 /**
  * Custom Authenticator components
  */
-declare type OverrideComponents<FieldType = {}, Props = {}> = AuthenticatorComponentOverrides<FieldType, Props>;
-declare type ConfirmSignInComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type OverrideComponents<FieldType = {}, Props = {}> = AuthenticatorComponentOverrides<FieldType, Props>;
+type ConfirmSignInComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: ConfirmSignInStyle;
 } & P>['ConfirmSignIn'];
-declare type ConfirmSignUpComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type ConfirmSignUpComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: ConfirmSignUpStyle;
 } & P>['ConfirmSignUp'];
-declare type ConfirmResetPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type ConfirmResetPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: ConfirmResetPasswordStyle;
 } & P>['ConfirmResetPassword'];
-declare type ConfirmVerifyUserComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type ConfirmVerifyUserComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: ConfirmVerifyUserStyle;
 } & P>['ConfirmVerifyUser'];
-declare type ForceNewPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type ForceNewPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: ForceNewPasswordStyle;
 } & P>['ForceNewPassword'];
-declare type ResetPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type ResetPasswordComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: ResetPasswordStyle;
 } & P>['ResetPassword'];
-declare type SetupTOTPComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type SetupTOTPComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: SetupTOTPStyle;
 } & P>['SetupTOTP'];
-declare type SignInComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type SignInComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: SignInStyle;
 } & P>['SignIn'];
-declare type SignUpComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
+type SignUpComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
     style?: SignUpStyle;
 } & P>['SignUp'];
-declare type VerifyUserComponent<P = {}> = OverrideComponents<RadioFieldOptions, {
+type VerifyUserComponent<P = {}> = OverrideComponents<RadioFieldOptions, {
     style?: VerifyUserStyle;
 } & P>['VerifyUser'];
 /**

package/dist/Authenticator/common/DefaultContainer/types.d.ts

@@ -9,7 +9,7 @@ export interface ContainerProps extends ScrollViewProps, Pick<KeyboardAvoidingVi
     keyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
     scrollViewContentContainerStyle?: StyleProp<ViewStyle>;
 }
-export declare type DefaultContainerComponent<P = {}> = React.ComponentType<ContainerProps & P>;
+export type DefaultContainerComponent<P = {}> = React.ComponentType<ContainerProps & P>;
 export interface InnerContainerStyles {
     container: ViewStyle;
 }

package/dist/Authenticator/common/DefaultContent/types.d.ts

@@ -24,19 +24,19 @@ export interface DefaultContentStyle {
     link?: ViewStyle;
     linksContainer?: ViewStyle;
 }
-export declare type DefaultContentStyleProps = {
+export type DefaultContentStyleProps = {
     [Key in keyof DefaultContentStyle]: StyleProp<DefaultContentStyle[Key]>;
 } & DefaultFormFieldsStyle;
-declare type DefaultComponentProps<FieldsType> = AuthenticatorComponentDefaultProps<FieldsType>[AuthenticatorRouteComponentName];
-declare type AuthenticatorButtonProps = Omit<ButtonProps, 'children'> & {
+type DefaultComponentProps<FieldsType> = AuthenticatorComponentDefaultProps<FieldsType>[AuthenticatorRouteComponentName];
+type AuthenticatorButtonProps = Omit<ButtonProps, 'children'> & {
     children: string;
 };
-declare type DefaultButtons = {
+type DefaultButtons = {
     primary: AuthenticatorButtonProps;
     secondary?: AuthenticatorButtonProps;
     links?: AuthenticatorButtonProps[];
 };
-export declare type DefaultContentProps<FieldsType extends TextFieldOptionsType | RadioFieldOptions | unknown = unknown> = Pick<DefaultComponentProps<FieldsType>, 'error' | 'Footer' | 'isPending'> & {
+export type DefaultContentProps<FieldsType extends TextFieldOptionsType | RadioFieldOptions | unknown = unknown> = Pick<DefaultComponentProps<FieldsType>, 'error' | 'Footer' | 'isPending'> & {
     buttons: DefaultButtons;
     body?: React.ReactNode;
     fields: FieldsType[];

package/dist/Authenticator/common/DefaultFormFields/types.d.ts

@@ -1,7 +1,7 @@
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core';
 import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks';
-export declare type FieldProps = Omit<TextFieldOptionsType, 'name'> & {
+export type FieldProps = Omit<TextFieldOptionsType, 'name'> & {
     disabled: boolean;
 };
 export interface FieldErrorsProps {
@@ -17,6 +17,6 @@ export interface DefaultFormFieldsStyle {
     fieldStyle?: StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>;
 }
-export declare type DefaultFormFieldsComponent<FieldsType> = AuthenticatorFormFieldsComponent<FieldsType, DefaultFormFieldsStyle>;
-export declare type DefaultTextFormFieldsComponent = DefaultFormFieldsComponent<TextFieldOptionsType>;
-export declare type DefaultRadioFormFieldsComponent = DefaultFormFieldsComponent<RadioFieldOptions>;
+export type DefaultFormFieldsComponent<FieldsType> = AuthenticatorFormFieldsComponent<FieldsType, DefaultFormFieldsStyle>;
+export type DefaultTextFormFieldsComponent = DefaultFormFieldsComponent<TextFieldOptionsType>;
+export type DefaultRadioFormFieldsComponent = DefaultFormFieldsComponent<RadioFieldOptions>;

package/dist/Authenticator/hooks/types.d.ts

@@ -1,24 +1,24 @@
 import { TextFieldProps, PasswordFieldProps, PhoneNumberFieldProps, RadioProps } from '../../primitives';
-export declare type MachineFieldTypeKey = 'password' | 'tel';
-export declare type AuthenticatorFieldTypeKey = 'password' | 'phone' | 'default' | 'radio';
-declare type RadioFieldOnBlur = RadioProps<string>['onBlur'];
-export declare type TextFieldOnBlur = TextFieldProps['onBlur'];
-export declare type OnChangeText = TextFieldProps['onChangeText'];
-declare type FieldOptions<FieldProps, Type extends AuthenticatorFieldTypeKey> = {
+export type MachineFieldTypeKey = 'password' | 'tel';
+export type AuthenticatorFieldTypeKey = 'password' | 'phone' | 'default' | 'radio';
+type RadioFieldOnBlur = RadioProps<string>['onBlur'];
+export type TextFieldOnBlur = TextFieldProps['onBlur'];
+export type OnChangeText = TextFieldProps['onChangeText'];
+type FieldOptions<FieldProps, Type extends AuthenticatorFieldTypeKey> = {
     name: string;
     onBlur?: Type extends 'radio' ? RadioFieldOnBlur : TextFieldOnBlur;
     required?: boolean;
     type: Type;
 } & Omit<FieldProps, 'disabled' | 'onBlur'>;
-declare type PasswordFieldOptions = FieldOptions<PasswordFieldProps, 'password'>;
-declare type PhoneFieldOptions = FieldOptions<PhoneNumberFieldProps, 'phone'>;
-declare type DefaultFieldOptions = FieldOptions<TextFieldProps, 'default'>;
-export declare type TextFieldOptionsType = (PasswordFieldOptions | PhoneFieldOptions | DefaultFieldOptions) & {
+type PasswordFieldOptions = FieldOptions<PasswordFieldProps, 'password'>;
+type PhoneFieldOptions = FieldOptions<PhoneNumberFieldProps, 'phone'>;
+type DefaultFieldOptions = FieldOptions<TextFieldProps, 'default'>;
+export type TextFieldOptionsType = (PasswordFieldOptions | PhoneFieldOptions | DefaultFieldOptions) & {
     labelHidden?: boolean;
 };
-export declare type RadioFieldOptions = FieldOptions<RadioProps<string>, 'radio'>;
+export type RadioFieldOptions = FieldOptions<RadioProps<string>, 'radio'>;
 /**
  * `field` options union
  */
-export declare type TypedField = RadioFieldOptions | TextFieldOptionsType;
+export type TypedField = RadioFieldOptions | TextFieldOptionsType;
 export {};

package/dist/Authenticator/hooks/useFieldValues/types.d.ts

@@ -1,6 +1,6 @@
 import { AuthenticatorComponentDefaultProps, AuthenticatorRouteComponentName } from '@aws-amplify/ui-react-core';
 import { TypedField } from '../types';
-export declare type MachineEventHandlers = Pick<AuthenticatorComponentDefaultProps[AuthenticatorRouteComponentName], 'handleBlur' | 'handleChange' | 'handleSubmit'>;
+export type MachineEventHandlers = Pick<AuthenticatorComponentDefaultProps[AuthenticatorRouteComponentName], 'handleBlur' | 'handleChange' | 'handleSubmit'>;
 export interface UseFieldValuesParams<FieldType extends TypedField> {
     componentName: AuthenticatorRouteComponentName;
     fields: FieldType[];

package/dist/Authenticator/hooks/useFieldValues/utils.js

@@ -66,6 +66,7 @@ const getFieldType = (type) => {
  */
 export const getTypedField = ({ type: machineFieldType, name, ...field }) => {
     const type = getFieldType(machineFieldType);
+    const testID = `authenticator__text-field__input-${name}`;
     return Object.entries(field).reduce((acc, [key, value]) => {
         // early return if key is not allowed
         if (!isKeyAllowed(key)) {
@@ -74,9 +75,9 @@ export const getTypedField = ({ type: machineFieldType, name, ...field }) => {
         // map to `required` prop
         if (key === 'isRequired' || key === 'required') {
             // `TypedField` props expects `required` key
-            return { ...acc, required: value };
+            return { ...acc, required: value, testID };
         }
-        return { ...acc, [key]: value };
+        return { ...acc, [key]: value, testID };
     }, 
     // initialize `acc` with field `name` and `type`
     { name, type });

package/dist/Authenticator/types.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AuthenticatorMachineOptions } from '@aws-amplify/ui';
 import { DefaultContainerComponent } from './common';
 import { Components } from './Defaults';
-declare type SupportedAuthenticatorMachineOptions = Omit<AuthenticatorMachineOptions, 'socialProviders' | 'formFields'>;
+type SupportedAuthenticatorMachineOptions = Omit<AuthenticatorMachineOptions, 'socialProviders' | 'formFields'>;
 export interface AuthenticatorProps extends SupportedAuthenticatorMachineOptions {
     children?: React.ReactNode;
     Container?: DefaultContainerComponent;
@@ -10,5 +10,5 @@ export interface AuthenticatorProps extends SupportedAuthenticatorMachineOptions
     Header?: React.ComponentType;
     components?: Components;
 }
-export declare type WithAuthenticatorOptions = Omit<AuthenticatorProps, 'children'>;
+export type WithAuthenticatorOptions = Omit<AuthenticatorProps, 'children'>;
 export {};

package/dist/InAppMessaging/components/BannerMessage/BannerMessage.js

@@ -11,6 +11,6 @@ export default function BannerMessage({ position = 'top', ...props }) {
     }
     const { wrapper, ...messageStyles } = styles;
     return (<MessageWrapper style={wrapper}>
-      <MessageLayout {...props} {...messageProps} orientation="landscape" styles={messageStyles}/>
+      <MessageLayout {...props} {...messageProps} orientation="landscape" styles={messageStyles} testID={`inappmessaging-${position}banner-dialog`}/>
     </MessageWrapper>);
 }

package/dist/InAppMessaging/components/FullScreenMessage/FullScreenMessage.js

@@ -13,6 +13,6 @@ export default function FullScreenMessage(props) {
     }
     const { wrapper, ...messageStyles } = styles;
     return (<MessageWrapper style={wrapper}>
-      <MessageLayout {...props} {...messageProps} orientation={deviceOrientation} styles={messageStyles}/>
+      <MessageLayout {...props} {...messageProps} orientation={deviceOrientation} styles={messageStyles} testID={`inappmessaging-fullscreen-dialog`}/>
     </MessageWrapper>);
 }

package/dist/InAppMessaging/components/InAppMessageDisplay/types.d.ts

@@ -3,10 +3,10 @@ import { BannerMessageProps } from '../BannerMessage';
 import { CarouselMessageProps } from '../CarouselMessage';
 import { FullScreenMessageProps } from '../FullScreenMessage';
 import { ModalMessageProps } from '../ModalMessage';
-declare type BannerStyle = BannerMessageProps['style'];
-declare type CarouselStyle = CarouselMessageProps['style'];
-declare type FullScreenStyle = FullScreenMessageProps['style'];
-declare type ModalStyle = ModalMessageProps['style'];
+type BannerStyle = BannerMessageProps['style'];
+type CarouselStyle = CarouselMessageProps['style'];
+type FullScreenStyle = FullScreenMessageProps['style'];
+type ModalStyle = ModalMessageProps['style'];
 export interface MessageDefaultComponents {
     BannerMessage: BannerMessageComponent<BannerStyle>;
     CarouselMessage: CarouselMessageComponent<CarouselStyle>;

package/dist/InAppMessaging/components/MessageLayout/MessageLayout.js

@@ -4,9 +4,9 @@ import { icons } from '../../../assets';
 import { Button, IconButton } from '../../../primitives';
 import { ICON_BUTTON_HIT_SLOP, ICON_BUTTON_SIZE, IN_APP_MESSAGING_TEST_ID, } from '../../constants';
 export default function MessageLayout({ orientation, ...props }) {
-    const { body, hasButtons, hasPrimaryButton, hasRenderableImage, hasSecondaryButton, header, image, onClose, primaryButton, secondaryButton, styles, } = props;
+    const { body, hasButtons, hasPrimaryButton, hasRenderableImage, hasSecondaryButton, header, image, onClose, primaryButton, secondaryButton, styles, testID, } = props;
     const iconButton = (<IconButton color={styles.iconButton.iconColor} hitSlop={ICON_BUTTON_HIT_SLOP} onPress={onClose} size={ICON_BUTTON_SIZE} source={icons.close} style={styles.iconButton.container} testID={IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON}/>);
-    return (<View style={styles.container}>
+    return (<View style={styles.container} testID={testID}>
       <View style={styles.contentContainer}>
         {orientation === 'portrait' && iconButton}
         {hasRenderableImage && (<View style={styles.imageContainer}>

package/dist/InAppMessaging/components/MessageLayout/types.d.ts

@@ -4,4 +4,5 @@ import { MessageComponentStyles, MessageOverrideStyle, UseMessageProps } from '.
 export interface LayoutProps extends Omit<MessageComponentBaseProps<MessageOverrideStyle>, 'style'>, Omit<UseMessageProps, 'shouldRenderMessage' | 'styles'> {
     orientation: DeviceOrientation;
     styles: Omit<MessageComponentStyles, 'wrapper'>;
+    testID?: string;
 }

package/dist/InAppMessaging/components/ModalMessage/ModalMessage.js

@@ -13,6 +13,6 @@ export default function ModalMessage(props) {
     }
     const { wrapper, ...messageStyles } = styles;
     return (<MessageWrapper style={wrapper}>
-      <MessageLayout {...props} {...messageProps} orientation={deviceOrientation} styles={messageStyles}/>
+      <MessageLayout {...props} {...messageProps} orientation={deviceOrientation} styles={messageStyles} testID={`inappmessaging-modal-dialog`}/>
     </MessageWrapper>);
 }

package/dist/InAppMessaging/hooks/useMessageImage/types.d.ts

@@ -1,14 +1,14 @@
-export declare type ImageDimensions = {
+export type ImageDimensions = {
     height: number | undefined;
     width: number | undefined;
 };
-export declare type ImageLoadingState = 'loaded' | 'failed';
+export type ImageLoadingState = 'loaded' | 'failed';
 export declare enum ImagePrefetchStatus {
     Failure = "FAILURE",
     Fetching = "FETCHING",
     Success = "SUCCESS"
 }
-export declare type UseMessageImage = {
+export type UseMessageImage = {
     hasRenderableImage: boolean;
     imageDimensions: ImageDimensions;
     isImageFetching: boolean;

package/dist/InAppMessaging/hooks/useMessageProps/types.d.ts

@@ -22,7 +22,7 @@ export interface MessageComponentStyles {
     textContainer: StyleProp<ViewStyle>;
     wrapper: StyleProp<ViewStyle>;
 }
-export declare type GetDefaultStyle<AdditionalStyle = unknown> = (imageDimensions: ImageDimensions, additionalStyle?: AdditionalStyle) => MessageDefaultStyle;
+export type GetDefaultStyle<AdditionalStyle = unknown> = (imageDimensions: ImageDimensions, additionalStyle?: AdditionalStyle) => MessageDefaultStyle;
 export interface UseMessageProps {
     hasButtons: boolean;
     hasPrimaryButton: boolean;

package/dist/hooks/useDeviceOrientation/useDeviceOrientation.d.ts

@@ -1,4 +1,4 @@
-export declare type DeviceOrientation = 'portrait' | 'landscape';
+export type DeviceOrientation = 'portrait' | 'landscape';
 export default function useDeviceOrientation(): {
     deviceOrientation: DeviceOrientation;
     isLandscapeMode: boolean;

package/dist/primitives/Button/types.d.ts

@@ -1,5 +1,5 @@
 import { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
-export declare type ButtonVariant = 'primary' | 'default' | 'link';
+export type ButtonVariant = 'primary' | 'default' | 'link';
 export interface ButtonProps extends PressableProps {
     textStyle?: StyleProp<TextStyle>;
     variant?: ButtonVariant;

package/dist/primitives/Heading/types.d.ts

@@ -1,9 +1,9 @@
 import { TextProps, TextStyle } from 'react-native';
-declare type Level = 1 | 2 | 3 | 4 | 5 | 6;
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
 export interface HeadingProps extends TextProps {
     level?: Level;
 }
-export declare type HeadingStyles = {
+export type HeadingStyles = {
     text?: TextStyle;
 } & {
     [key in Level]: TextStyle;

package/dist/primitives/Icon/types.d.ts

@@ -1,6 +1,6 @@
 import { ColorValue, ImageProps, ImageStyle } from 'react-native';
-export declare type Size = 'xs' | 'small' | 'medium' | 'large' | 'xl';
-export declare type IconSizes = Record<Size, number>;
+export type Size = 'xs' | 'small' | 'medium' | 'large' | 'xl';
+export type IconSizes = Record<Size, number>;
 export interface IconStyles {
     icon?: ImageStyle;
 }

package/dist/primitives/Label/types.d.ts

@@ -6,8 +6,8 @@ export interface LabelProps extends TextProps {
      */
     variant?: LabelVariant;
 }
-export declare type LabelPosition = 'start' | 'end' | 'top' | 'bottom';
-export declare type LabelVariant = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'info' | 'success';
+export type LabelPosition = 'start' | 'end' | 'top' | 'bottom';
+export type LabelVariant = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'info' | 'success';
 export interface LabelStyles {
     text?: TextStyle;
     primary?: TextStyle;

package/dist/primitives/Radio/types.d.ts

@@ -1,6 +1,6 @@
 import { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { LabelPosition } from '../Label/types';
-export declare type Size = number | 'small' | 'medium' | 'large';
+export type Size = number | 'small' | 'medium' | 'large';
 export interface RadioProps<T> extends PressableProps {
     disabled?: boolean;
     label?: string;
@@ -13,7 +13,7 @@ export interface RadioProps<T> extends PressableProps {
     selected?: boolean;
     value: T;
 }
-export declare type RadioDimensions = Pick<ViewStyle, 'height' | 'width'>;
+export type RadioDimensions = Pick<ViewStyle, 'height' | 'width'>;
 export interface RadioStyles {
     container?: ViewStyle;
     disabled?: ViewStyle;

package/dist/primitives/RadioGroup/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TextStyle, ViewProps, ViewStyle } from 'react-native';
 import { RadioProps } from '../Radio';
-export declare type Direction = 'vertical' | 'horizontal';
+export type Direction = 'vertical' | 'horizontal';
 export interface RadioGroupProps<T> extends Pick<RadioProps<T>, 'accessibilityRole' | 'disabled' | 'label' | 'labelPosition' | 'labelStyle' | 'onChange' | 'size'>, ViewProps {
     children: React.ReactElement<RadioProps<T>>[];
     direction?: Direction;

package/dist/primitives/Tabs/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TextStyle, ViewProps, ViewStyle } from 'react-native';
 import { ButtonProps } from '../Button';
-declare type IndicatorPosition = 'top' | 'bottom';
+type IndicatorPosition = 'top' | 'bottom';
 export interface TabsProps extends ViewProps {
     /**
      * @description

package/dist/theme/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNativeTokens } from '@aws-amplify/ui';
 import { ButtonStyles, CheckboxStyles, DividerStyles, ErrorMessageStyles, HeadingStyles, IconStyles, IconButtonStyles, LabelStyles, PasswordFieldStyles, PhoneNumberFieldStyles, RadioStyles, RadioGroupStyles, TabsStyles, TextFieldStyles } from '../primitives';
-declare type ComponentTheme<ComponentType, Output> = Output extends 'output' ? ComponentType : ((tokens: StrictTheme['tokens']) => ComponentType) | ComponentType;
-export declare type Components<Output> = Record<string, object> & {
+type ComponentTheme<ComponentType, Output> = Output extends 'output' ? ComponentType : ((tokens: StrictTheme['tokens']) => ComponentType) | ComponentType;
+export type Components<Output> = Record<string, object> & {
     button?: ComponentTheme<ButtonStyles, Output>;
     checkbox?: ComponentTheme<CheckboxStyles, Output>;
     divider?: ComponentTheme<DividerStyles, Output>;
@@ -17,13 +17,13 @@ export declare type Components<Output> = Record<string, object> & {
     tabs?: ComponentTheme<TabsStyles, Output>;
     textField?: ComponentTheme<TextFieldStyles, Output>;
 };
-export declare type ColorMode = 'light' | 'dark' | 'system' | null;
-export declare type Override = Omit<Theme, 'overrides'> & {
+export type ColorMode = 'light' | 'dark' | 'system' | null;
+export type Override = Omit<Theme, 'overrides'> & {
     colorMode?: ColorMode;
 };
-export declare type StrictTokens = ReactNativeTokens<'required'>;
-export declare type Tokens = ReactNativeTokens<'optional'>;
-declare type OmittedComponents = 'checkbox' | 'divider' | 'tabs';
+export type StrictTokens = ReactNativeTokens<'required'>;
+export type Tokens = ReactNativeTokens<'optional'>;
+type OmittedComponents = 'checkbox' | 'divider' | 'tabs';
 /**
  * A custom Theme with all properties optional.
  */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.14";
+export declare const VERSION = "1.2.16";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.14';
+export const VERSION = '1.2.16';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -18,6 +18,7 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
+    "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.17.10",
     "@babel/preset-env": "^7.17.10",
@@ -28,7 +29,6 @@
     "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "^28.0.3",
     "eslint": "^8.14.0",
-    "eslint-config-amplify-ui": "0.0.0",
     "metro-react-native-babel-preset": "^0.70.2",
     "react": "^17.0.2",
     "react-native": "^0.68.1",
@@ -37,8 +37,8 @@
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.0",
-    "@aws-amplify/ui-react-core": "2.1.19"
+    "@aws-amplify/ui": "5.6.2",
+    "@aws-amplify/ui-react-core": "2.1.21"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

package/src/Authenticator/hooks/useFieldValues/__tests__/utils.spec.ts

@@ -23,7 +23,11 @@ const phoneField = {
   name: 'phonenumber',
   type: 'tel',
 };
-const textField = { order: 3, name: 'username', isRequired: true };
+const textField = {
+  order: 3,
+  name: 'username',
+  isRequired: true,
+};
 
 const radioField = { type: 'radio', name: 'email', value: 'hello@world.com' };
 
@@ -191,7 +195,10 @@ describe('getRouteTypedFields', () => {
     });
 
     const expected = [
-      passwordField,
+      {
+        ...passwordField,
+        testID: `authenticator__text-field__input-${passwordField.name}`,
+      },
       {
         name: phoneField.name,
         type: 'phone',
@@ -200,6 +207,7 @@ describe('getRouteTypedFields', () => {
         name: textField.name,
         required: textField.isRequired,
         type: 'default',
+        testID: `authenticator__text-field__input-${textField.name}`,
       },
     ];
 

package/src/Authenticator/hooks/useFieldValues/utils.ts

@@ -130,6 +130,7 @@ export const getTypedField = ({
   ...field
 }: AuthenticatorLegacyField): TypedField => {
   const type = getFieldType(machineFieldType);
+  const testID = `authenticator__text-field__input-${name}`;
 
   return Object.entries(field).reduce(
     (acc, [key, value]) => {
@@ -141,10 +142,10 @@ export const getTypedField = ({
       // map to `required` prop
       if (key === 'isRequired' || key === 'required') {
         // `TypedField` props expects `required` key
-        return { ...acc, required: value as boolean };
+        return { ...acc, required: value as boolean, testID };
       }
 
-      return { ...acc, [key]: value };
+      return { ...acc, [key]: value, testID };
     },
     // initialize `acc` with field `name` and `type`
     { name, type } as TypedField

package/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx

@@ -31,6 +31,7 @@ export default function BannerMessage({
         {...messageProps}
         orientation="landscape"
         styles={messageStyles}
+        testID={`inappmessaging-${position}banner-dialog`}
       />
     </MessageWrapper>
   );

package/src/InAppMessaging/components/BannerMessage/__tests__/__snapshots__/BannerMessage.spec.tsx.snap

@@ -29,6 +29,7 @@ exports[`BannerMessage correctly handles a primaryButton button prop 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-topbanner-dialog"
   >
     <View
       style={
@@ -215,6 +216,7 @@ exports[`BannerMessage correctly handles a secondaryButton button prop 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-topbanner-dialog"
   >
     <View
       style={
@@ -401,6 +403,7 @@ exports[`BannerMessage renders a message as expected with an image 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-topbanner-dialog"
   >
     <View
       style={
@@ -534,6 +537,7 @@ exports[`BannerMessage renders a message as expected without an image 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-topbanner-dialog"
   >
     <View
       style={

package/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx

@@ -32,6 +32,7 @@ export default function FullScreenMessage(
         {...messageProps}
         orientation={deviceOrientation}
         styles={messageStyles}
+        testID={`inappmessaging-fullscreen-dialog`}
       />
     </MessageWrapper>
   );

package/src/InAppMessaging/components/FullScreenMessage/__tests__/__snapshots__/FullScreenMessage.spec.tsx.snap

@@ -115,6 +115,7 @@ exports[`FullScreenMessage renders as expected in landscape mode 1`] = `
         },
       }
     }
+    testID="inappmessaging-fullscreen-dialog"
   />
 </MessageWrapper>
 `;
@@ -231,6 +232,7 @@ exports[`FullScreenMessage renders as expected in portrait mode 1`] = `
         },
       }
     }
+    testID="inappmessaging-fullscreen-dialog"
   />
 </MessageWrapper>
 `;

package/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx

@@ -29,6 +29,7 @@ export default function MessageLayout({
     primaryButton,
     secondaryButton,
     styles,
+    testID,
   } = props;
 
   const iconButton = (
@@ -44,7 +45,7 @@ export default function MessageLayout({
   );
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={testID}>
       <View style={styles.contentContainer}>
         {orientation === 'portrait' && iconButton}
         {hasRenderableImage && (

package/src/InAppMessaging/components/MessageLayout/types.ts

@@ -12,4 +12,5 @@ export interface LayoutProps
     Omit<UseMessageProps, 'shouldRenderMessage' | 'styles'> {
   orientation: DeviceOrientation;
   styles: Omit<MessageComponentStyles, 'wrapper'>;
+  testID?: string;
 }

package/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx

@@ -31,6 +31,7 @@ export default function ModalMessage(
         {...messageProps}
         orientation={deviceOrientation}
         styles={messageStyles}
+        testID={`inappmessaging-modal-dialog`}
       />
     </MessageWrapper>
   );

package/src/InAppMessaging/components/ModalMessage/__tests__/__snapshots__/ModalMessage.spec.tsx.snap

@@ -29,6 +29,7 @@ exports[`ModalMessage correctly handles a primaryButton prop 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-modal-dialog"
   >
     <View
       style={
@@ -215,6 +216,7 @@ exports[`ModalMessage correctly handles a secondaryButton prop 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-modal-dialog"
   >
     <View
       style={
@@ -401,6 +403,7 @@ exports[`ModalMessage renders a message as expected with an image 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-modal-dialog"
   >
     <View
       style={
@@ -534,6 +537,7 @@ exports[`ModalMessage renders as expected in landscape mode 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-modal-dialog"
   >
     <View
       style={
@@ -644,6 +648,7 @@ exports[`ModalMessage renders as expected in portrait mode 1`] = `
         Object {},
       ]
     }
+    testID="inappmessaging-modal-dialog"
   >
     <View
       style={

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.14';
+export const VERSION = '1.2.16';