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

package/dist/primitives/TextField/styles.js

@@ -1,16 +1,19 @@
 import { Platform, StyleSheet } from 'react-native';
-import { getLineHeight } from '../../utils';
 export const getThemedStyles = (theme) => {
     const { components, tokens: { colors, fontSizes, opacities, space, radii, borderWidths }, } = theme;
     return StyleSheet.create({
         container: {
             alignItems: 'flex-start',
+            marginBottom: space.xs,
             ...components?.textField?.container,
         },
         disabled: {
             opacity: opacities[60],
             ...components?.textField?.disabled,
         },
+        error: {
+            borderColor: colors.border.error,
+        },
         fieldContainer: {
             alignItems: 'center',
             borderColor: colors.border.primary,
@@ -25,14 +28,14 @@ export const getThemedStyles = (theme) => {
             fontSize: fontSizes.medium,
             flexGrow: 1,
             paddingVertical: space.small,
+            paddingHorizontal: space.xxs,
             // this is needed because of extra padding inside the input - in Android only
             ...(Platform.OS === 'android' && { padding: 0 }),
             ...components?.textField?.field,
         },
         label: {
             color: colors.font.secondary,
-            lineHeight: getLineHeight(fontSizes.small),
-            padding: space.xxs,
+            paddingVertical: space.xs,
             ...components?.textField?.label,
         },
     });

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

@@ -51,6 +51,7 @@ export interface TextFieldProps extends Omit<TextInputProps, 'editable'> {
 export interface TextFieldStyles {
     container?: ViewStyle;
     disabled?: ViewStyle;
+    error?: ViewStyle;
     field?: TextStyle;
     fieldContainer?: ViewStyle;
     label?: TextStyle;

package/dist/theme/createTheme.js

@@ -7,7 +7,7 @@ import { defaultTheme } from './defaultTheme';
 // calling the component theme function with the already resolved base tokens
 // OR
 // resolving the component theme object
-const setupComponents = ({ components, tokens }) => {
+const setupComponents = ({ components, tokens, }) => {
     const output = components
         ? Object.entries(components).reduce((acc, [key, value]) => ({
             ...acc,
@@ -19,28 +19,34 @@ const setupComponents = ({ components, tokens }) => {
         components: output,
     }).components;
 };
+const shouldParseFloatValue = (pathKey) => [
+    'space',
+    'borderWidths',
+    'opacities',
+    'fontSizes',
+    'lineHeights',
+    'radii',
+].includes(pathKey);
 const setupToken = ({ token, path = [], spaceModifier, }) => {
     const { value } = token;
     if (typeof value === 'string') {
-        // Perform transforms
-        if (path[0] === 'space') {
-            if (value.includes('rem')) {
-                return Math.floor(parseFloat(value) * 16 * spaceModifier);
-            }
-        }
-        if (value.includes('rem')) {
-            return Math.floor(parseFloat(value) * 16);
-        }
-        if (value.includes('px')) {
-            return parseInt(value, 10);
-        }
-        if (path[0] === 'opacities') {
-            return parseFloat(value);
-        }
         // Remove .value from references if there is a reference
+        // this needs to come first so we don't get NaNs for references
         if (usesReference(value)) {
             return value.replace('.value', '');
         }
+        if (shouldParseFloatValue(path[0])) {
+            if (value.includes('rem')) {
+                if (path[0] === 'space') {
+                    return Math.floor(parseFloat(value) * 16 * spaceModifier);
+                }
+                return Math.floor(parseFloat(value) * 16);
+            }
+            if (value.includes('px')) {
+                return parseInt(value, 10);
+            }
+            return parseFloat(value);
+        }
         return value;
     }
     // Font Weights in RN are strings
@@ -90,11 +96,11 @@ export const createTheme = (theme, colorMode) => {
             return setupToken({ token, path, spaceModifier });
         },
     }));
-    let { components } = mergedTheme;
+    let components;
     // Resolve component token references too
     if (mergedTheme.components) {
         components = setupComponents({
-            ...mergedTheme,
+            components: mergedTheme.components,
             tokens,
         });
     }

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';
 type ComponentTheme<ComponentType, Output> = Output extends 'output' ? ComponentType : ((tokens: StrictTheme['tokens']) => ComponentType) | ComponentType;
-export type Components<Output> = Record<string, object> & {
+export type Components<Output extends 'input' | 'output' | unknown = unknown> = {
     button?: ComponentTheme<ButtonStyles, Output>;
     checkbox?: ComponentTheme<CheckboxStyles, Output>;
     divider?: ComponentTheme<DividerStyles, Output>;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.20";
+export declare const VERSION = "1.2.22";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.20';
+export const VERSION = '1.2.22';

package/jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   preset: 'react-native',
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
     '!<rootDir>/src/**/*{c,C}onstants.ts',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -28,7 +28,7 @@
     "@types/react-native": "^0.67.6",
     "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "^28.0.3",
-    "eslint": "^8.14.0",
+    "eslint": "^8.44.0",
     "jest": "^27.0.4",
     "metro-react-native-babel-preset": "^0.70.2",
     "react": "^17.0.2",
@@ -38,9 +38,9 @@
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.6",
-    "@aws-amplify/ui-react-core": "2.1.25",
-    "@aws-amplify/ui-react-core-notifications": "1.0.2"
+    "@aws-amplify/ui": "5.6.8",
+    "@aws-amplify/ui-react-core": "2.1.27",
+    "@aws-amplify/ui-react-core-notifications": "1.0.4"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

package/src/Authenticator/Authenticator.tsx

@@ -8,7 +8,6 @@ import {
   useAuthenticator,
   useAuthenticatorRoute,
   useAuthenticatorInitMachine,
-  UseAuthenticator,
 } from '@aws-amplify/ui-react-core';
 
 import { configureComponent } from '@aws-amplify/ui';
@@ -45,9 +44,6 @@ const DEFAULTS = {
   VerifyUser,
 };
 
-const isAuthenticatedRoute = (route: UseAuthenticator['route']) =>
-  route === 'authenticated' || route === 'signOut';
-
 const routePropSelector = ({
   route,
 }: AuthenticatorMachineContext): AuthenticatorMachineContext['route'][] => [
@@ -77,7 +73,7 @@ function Authenticator({
 
   useAuthenticatorInitMachine(options);
 
-  const { fields, route } = useAuthenticator(routePropSelector);
+  const { authStatus, fields, route } = useAuthenticator(routePropSelector);
 
   const components = useMemo(
     // allow any to prevent TS from assuming that all fields are of type `TextFieldOptions`
@@ -89,7 +85,7 @@ function Authenticator({
 
   const typedFields = getRouteTypedFields({ fields, route });
 
-  if (isAuthenticatedRoute(route)) {
+  if (authStatus === 'authenticated') {
     return children ? <>{children}</> : null;
   }
 

package/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmResetPasswordComponent } from '../types';
+import { DefaultConfirmResetPasswordProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmResetPassword';
 
@@ -20,7 +20,7 @@ const {
   getResendCodeText,
 } = authenticatorTextUtil;
 
-const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
+const ConfirmResetPassword = ({
   fields,
   handleBlur,
   handleChange,
@@ -28,11 +28,13 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
   hasValidationErrors,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmResetPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -40,6 +42,7 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -72,6 +75,7 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -35,6 +35,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -49,9 +50,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -59,8 +60,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -102,6 +102,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -115,6 +116,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -132,9 +134,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -142,8 +144,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -186,6 +187,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -263,6 +265,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -280,9 +283,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -290,8 +293,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -334,6 +336,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -497,8 +500,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -583,7 +585,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -607,6 +609,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -621,9 +624,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -631,8 +634,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -674,6 +676,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -687,6 +690,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -704,9 +708,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -714,8 +718,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -758,6 +761,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -835,6 +839,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -852,9 +857,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -862,8 +867,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -906,6 +910,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -1010,8 +1015,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

package/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmSignInComponent } from '../types';
+import { DefaultConfirmSignInProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmSignIn';
 
@@ -20,7 +20,7 @@ const {
   getConfirmingText,
 } = authenticatorTextUtil;
 
-const ConfirmSignIn: DefaultConfirmSignInComponent = ({
+const ConfirmSignIn = ({
   challengeName,
   fields,
   handleBlur,
@@ -28,11 +28,13 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmSignInProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -40,6 +42,7 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getChallengeText(challengeName);
@@ -71,6 +74,7 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

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

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

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -35,6 +35,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -49,9 +50,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -59,8 +60,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -102,6 +102,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -201,8 +202,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -296,7 +296,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -320,6 +320,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -334,9 +335,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -344,8 +345,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -387,6 +387,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -427,8 +428,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }