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

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: [],

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

@@ -499,6 +499,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -528,6 +533,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -1105,6 +1111,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -1134,6 +1145,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -1661,6 +1673,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -1690,6 +1707,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -2281,6 +2299,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -2325,6 +2344,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -2354,6 +2378,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -2968,6 +2993,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -2997,6 +3027,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

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

@@ -27,7 +27,11 @@ const VerifyUser: DefaultVerifyUserComponent = ({
   skipVerification,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -42,10 +46,10 @@ const VerifyUser: DefaultVerifyUserComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: verifyText, onPress: handleFormSubmit },
+      primary: { children: verifyText, disabled, onPress: handleFormSubmit },
       links: [{ children: skipText, onPress: skipVerification }],
     }),
-    [handleFormSubmit, skipText, skipVerification, verifyText]
+    [disabled, handleFormSubmit, skipText, skipVerification, verifyText]
   );
 
   return (

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

@@ -102,6 +102,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -168,6 +169,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -201,6 +203,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -220,6 +227,7 @@ Array [
           "backgroundColor": "hsl(190, 95%, 30%)",
           "borderRadius": 4,
           "justifyContent": "center",
+          "opacity": 0.6,
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
@@ -230,6 +238,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -410,6 +419,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -476,6 +486,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -523,6 +534,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -567,6 +579,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -586,6 +603,7 @@ Array [
           "backgroundColor": "hsl(190, 95%, 30%)",
           "borderRadius": 4,
           "justifyContent": "center",
+          "opacity": 0.6,
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
@@ -596,6 +614,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/common/DefaultContent/DefaultContent.tsx

@@ -69,6 +69,7 @@ export default function DefaultContent<
           iconStyle={themedStyles.errorMessageIcon}
           labelStyle={themedStyles.errorMessageLabel}
           style={themedStyles.errorMessage}
+          testID="amplify__error-message"
         >
           {error}
         </ErrorMessage>
@@ -78,6 +79,7 @@ export default function DefaultContent<
         variant="primary"
         textStyle={themedStyles.buttonPrimaryLabel}
         style={themedStyles.buttonPrimary}
+        testID="amplify__button"
       />
       {secondary ? (
         <Button

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

@@ -1,5 +1,5 @@
 import { ViewStyle } from 'react-native';
-import { BannerMessageCommonProps } from '@aws-amplify/ui-react-core';
+import { BannerMessageCommonProps } from '@aws-amplify/ui-react-core-notifications';
 
 import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
 

package/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { MessageContentProps } from '@aws-amplify/ui-react-core';
+import { MessageContentProps } from '@aws-amplify/ui-react-core-notifications';
 
 import { Carousel } from '../../../primitives';
 import { IN_APP_MESSAGING_TEST_ID } from '../../constants';

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

@@ -3,7 +3,7 @@ import { StyleProp, ViewStyle } from 'react-native';
 import {
   CarouselMessageCommonProps,
   MessageComponentBaseProps,
-} from '@aws-amplify/ui-react-core';
+} from '@aws-amplify/ui-react-core-notifications';
 
 import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
 

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

@@ -1,4 +1,4 @@
-import { FullScreenMessageCommonProps } from '@aws-amplify/ui-react-core';
+import { FullScreenMessageCommonProps } from '@aws-amplify/ui-react-core-notifications';
 import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
 
 export interface FullScreenMessageProps

package/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx

@@ -4,7 +4,7 @@ import {
   handleMessageAction,
   OnMessageAction,
   useMessage,
-} from '@aws-amplify/ui-react-core';
+} from '@aws-amplify/ui-react-core-notifications';
 
 import { BannerMessage } from '../BannerMessage';
 import { FullScreenMessage } from '../FullScreenMessage';

package/src/InAppMessaging/components/InAppMessageDisplay/__tests__/InAppMessageDisplay.spec.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { render } from '@testing-library/react-native';
-import { MessageLayout, useMessage } from '@aws-amplify/ui-react-core';
+import {
+  MessageLayout,
+  useMessage,
+} from '@aws-amplify/ui-react-core-notifications';
 
 import InAppMessageDisplay from '../InAppMessageDisplay';
 
-jest.mock('@aws-amplify/ui-react-core');
+jest.mock('@aws-amplify/ui-react-core-notifications');
 
 const mockUseMessage = useMessage as jest.Mock;
 

package/src/InAppMessaging/components/InAppMessageDisplay/handleMessageLinkAction.ts

@@ -1,6 +1,6 @@
 import { Linking } from 'react-native';
 import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import { HandleMessageLinkAction } from '@aws-amplify/ui-react-core';
+import { HandleMessageLinkAction } from '@aws-amplify/ui-react-core-notifications';
 
 const logger = new Logger('Notifications.InAppMessaging');
 

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

@@ -3,7 +3,7 @@ import {
   CarouselMessageComponent,
   FullScreenMessageComponent,
   ModalMessageComponent,
-} from '@aws-amplify/ui-react-core';
+} from '@aws-amplify/ui-react-core-notifications';
 
 import { BannerMessageProps } from '../BannerMessage';
 import { CarouselMessageProps } from '../CarouselMessage';

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

@@ -1,4 +1,4 @@
-import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core';
+import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core-notifications';
 
 import { DeviceOrientation } from '../../../hooks';
 import {

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

@@ -1,4 +1,4 @@
-import { ModalMessageCommonProps } from '@aws-amplify/ui-react-core';
+import { ModalMessageCommonProps } from '@aws-amplify/ui-react-core-notifications';
 
 import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
 

package/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InAppMessagingProvider } from '@aws-amplify/ui-react-core';
+import { InAppMessagingProvider } from '@aws-amplify/ui-react-core-notifications';
 
 import { InAppMessageDisplay, MessageComponents } from '../InAppMessageDisplay';
 

package/src/InAppMessaging/hooks/useMessageImage/__tests__/useMessageImage.spec.ts

@@ -1,7 +1,7 @@
 import { Image } from 'react-native';
 import { renderHook } from '@testing-library/react-hooks';
 import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import { MessageImage } from '@aws-amplify/ui-react-core';
+import { MessageImage } from '@aws-amplify/ui-react-core-notifications';
 
 import { getLayoutImageDimensions, prefetchNetworkImage } from '../utils';
 import useMessageImage from '../useMessageImage';

package/src/InAppMessaging/hooks/useMessageImage/useMessageImage.ts

@@ -2,7 +2,10 @@ import { useEffect, useRef, useState } from 'react';
 import { Image } from 'react-native';
 
 import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import { MessageImage, MessageLayout } from '@aws-amplify/ui-react-core';
+import {
+  MessageImage,
+  MessageLayout,
+} from '@aws-amplify/ui-react-core-notifications';
 
 import { ImageDimensions, ImagePrefetchStatus, UseMessageImage } from './types';
 import { getLayoutImageDimensions, prefetchNetworkImage } from './utils';

package/src/InAppMessaging/hooks/useMessageImage/utils.ts

@@ -1,6 +1,6 @@
 import { Image } from 'react-native';
 import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import { MessageLayout } from '@aws-amplify/ui-react-core';
+import { MessageLayout } from '@aws-amplify/ui-react-core-notifications';
 
 import {
   BANNER_IMAGE_SCREEN_SIZE,

package/src/InAppMessaging/hooks/useMessageProps/__tests__/useMessageProps.spec.ts

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import {
   MessageButtonProps,
   MessageComponentBaseProps,
-} from '@aws-amplify/ui-react-core';
+} from '@aws-amplify/ui-react-core-notifications';
 
 import { useMessageImage } from '../../useMessageImage';
 import { MessageOverrideStyle } from '../types';

package/src/InAppMessaging/hooks/useMessageProps/__tests__/utils.spec.ts

@@ -4,7 +4,7 @@ import {
   MessageComponentBaseProps,
   MessageLayout,
   MessageTextAlign,
-} from '@aws-amplify/ui-react-core';
+} from '@aws-amplify/ui-react-core-notifications';
 import { BUTTON_PRESSED_OPACITY } from '../../../constants';
 import { MessageDefaultStyle } from '../types';
 import { StyleParams } from '../types';

package/src/InAppMessaging/hooks/useMessageProps/types.ts

@@ -5,7 +5,10 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import { MessageLayout, MessagePayloadStyle } from '@aws-amplify/ui-react-core';
+import {
+  MessageLayout,
+  MessagePayloadStyle,
+} from '@aws-amplify/ui-react-core-notifications';
 
 import { ButtonProps } from '../../../primitives';
 

package/src/InAppMessaging/hooks/useMessageProps/useMessageProps.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { isEmpty } from '@aws-amplify/ui';
-import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core';
+import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core-notifications';
 
 import { useMessageImage } from '../useMessageImage';
 import {

package/src/InAppMessaging/hooks/useMessageProps/utils.ts

@@ -4,7 +4,7 @@ import {
   MessageComponentBaseProps,
   MessageLayout,
   MessagePayloadStyle,
-} from '@aws-amplify/ui-react-core';
+} from '@aws-amplify/ui-react-core-notifications';
 
 import { DEFAULT_CAROUSEL_INDICATOR_SIZE } from '../../../primitives';
 import { BUTTON_PRESSED_OPACITY, SPACING_EXTRA_LARGE } from '../../constants';

package/src/InAppMessaging/index.ts

@@ -1,7 +1,7 @@
 export {
   InAppMessagingProvider,
   useInAppMessaging,
-} from '@aws-amplify/ui-react-core';
+} from '@aws-amplify/ui-react-core-notifications';
 
 export {
   BannerMessageProps,

package/src/primitives/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -37,6 +37,7 @@ exports[`Radio applies theme and custom styles 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -108,6 +109,7 @@ exports[`Radio renders as expected when disabled 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -174,6 +176,7 @@ exports[`Radio renders as expected when passing a number to the size prop 1`] =
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 40,
@@ -257,6 +260,7 @@ exports[`Radio renders as expected when selected is false 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -323,6 +327,7 @@ exports[`Radio renders as expected when selected is true 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -406,6 +411,7 @@ exports[`Radio renders as expected when size is large 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 24,
@@ -489,6 +495,7 @@ exports[`Radio renders as expected when size is medium 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -572,6 +579,7 @@ exports[`Radio renders as expected when size is small 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 16,
@@ -655,6 +663,7 @@ exports[`Radio renders as expected with accessibilityRole 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,

package/src/primitives/Radio/styles.ts

@@ -9,7 +9,7 @@ const ROUNDED_BORDER_RADIUS = 999;
 export const getThemedStyles = (theme: StrictTheme): Required<RadioStyles> => {
   const {
     components,
-    tokens: { colors, fontSizes, opacities, borderWidths },
+    tokens: { colors, fontSizes, opacities, borderWidths, space },
   } = theme;
 
   return StyleSheet.create({
@@ -31,6 +31,7 @@ export const getThemedStyles = (theme: StrictTheme): Required<RadioStyles> => {
       borderRadius: ROUNDED_BORDER_RADIUS,
       borderWidth: borderWidths.medium,
       justifyContent: 'center',
+      margin: space.xxs,
       ...components?.radio?.radioContainer,
     },
     radioDot: {