@aws-amplify/ui 6.0.2 → 6.0.4

package/dist/index.js

@@ -3287,6 +3287,7 @@ const runFieldValidators = ({ value, validators, eventType, hasBlurred, }) => {
 
 // default `autoSignIn` flag is `true`
 const DEFAULT_AUTO_SIGN_IN = true;
+const EMPTY_STRING = '';
 const sanitizePhoneNumber = (dialCode, phoneNumber) => `${dialCode}${phoneNumber}`.replace(/[^A-Z0-9+]/gi, '');
 const selectUserAttributes = (_, key) => {
     // Allowlist of Cognito User Pool Attributes (from OpenID Connect specification)
@@ -3318,7 +3319,7 @@ const selectUserAttributes = (_, key) => {
 const getUserAttributes = (formValues) => {
     const { phone_number, ...userAttributes } = pickBy__default["default"](formValues, selectUserAttributes);
     // only include `phone_number` attribute in `userAttributes` if it has a value
-    if (isString(phone_number)) {
+    if (isString(phone_number) && phone_number !== EMPTY_STRING) {
         const { country_code } = formValues;
         return {
             ...userAttributes,
@@ -4461,13 +4462,13 @@ function signUpActor({ services }) {
             async federatedSignIn(_, { data }) {
                 return auth.signInWithRedirect(data);
             },
-            async handleSignUp(context, _event) {
+            async handleSignUp(context) {
                 const { formValues, loginMechanisms, username } = context;
                 const loginMechanism = loginMechanisms[0];
                 const input = getSignUpInput(username, formValues, loginMechanism);
                 return services.handleSignUp(input);
             },
-            async validateSignUp(context, _event) {
+            async validateSignUp(context) {
                 // This needs to exist in the machine to reference new `services`
                 return runValidators(context.formValues, context.touched, context.passwordSettings, [
                     // Validation of password
@@ -4629,6 +4630,7 @@ const LEGACY_WAIT_CONFIG = {
             actions: ['configure'],
             target: 'getConfig',
         },
+        SIGN_OUT: '#authenticator.signOut',
     },
 };
 // setup step proceeds directly to configure
@@ -4654,7 +4656,7 @@ function createAuthenticatorMachine(options) {
             idle: {
                 invoke: {
                     src: 'handleGetCurrentUser',
-                    onDone: { actions: 'setUser', target: 'authenticated' },
+                    onDone: { actions: 'setUser', target: 'setup' },
                     onError: { target: 'setup' },
                 },
             },
@@ -4665,10 +4667,17 @@ function createAuthenticatorMachine(options) {
                     getConfig: {
                         invoke: {
                             src: 'getAmplifyConfig',
-                            onDone: {
-                                actions: ['applyAmplifyConfig', 'setHasSetup'],
-                                target: 'goToInitialState',
-                            },
+                            onDone: [
+                                {
+                                    actions: ['applyAmplifyConfig', 'setHasSetup'],
+                                    cond: 'hasUser',
+                                    target: '#authenticator.authenticated',
+                                },
+                                {
+                                    actions: ['applyAmplifyConfig', 'setHasSetup'],
+                                    target: 'goToInitialState',
+                                },
+                            ],
                         },
                     },
                     goToInitialState: {
@@ -4927,7 +4936,7 @@ function createAuthenticatorMachine(options) {
             configure: xstate.assign((_, event) => {
                 const { services: customServices, ...config } = !isEmptyObject(overrideConfigServices)
                     ? overrideConfigServices
-                    : event.data;
+                    : event.data ?? {};
                 return {
                     services: { ...defaultServices, ...customServices },
                     config,
@@ -4941,6 +4950,9 @@ function createAuthenticatorMachine(options) {
             isInitialStateSignUp: ({ config }) => config.initialState === 'signUp',
             isInitialStateResetPassword: ({ config }) => config.initialState === 'forgotPassword',
             shouldSetup: ({ hasSetup }) => !hasSetup,
+            hasUser: ({ user }) => {
+                return !!user;
+            },
         },
         services: {
             getAmplifyConfig: ({ services }) => services.getAmplifyConfig(),
@@ -5388,13 +5400,7 @@ const button = {
                 backgroundColor: { value: '{colors.blue.10.value}' },
                 color: { value: '{colors.blue.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.blue.100.value}',
-                    },
+                    value: '{components.fieldcontrol.info._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5417,13 +5423,7 @@ const button = {
                 backgroundColor: { value: '{colors.orange.10.value}' },
                 color: { value: '{colors.orange.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.orange.100.value}',
-                    },
+                    value: '{components.fieldcontrol.warning._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5446,13 +5446,7 @@ const button = {
                 backgroundColor: { value: '{colors.green.10.value}' },
                 color: { value: '{colors.green.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.green.100.value}',
-                    },
+                    value: '{components.fieldcontrol.success._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5475,13 +5469,7 @@ const button = {
                 backgroundColor: { value: '{colors.red.10.value}' },
                 color: { value: '{colors.red.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.red.100.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5504,13 +5492,7 @@ const button = {
                 backgroundColor: { value: '{colors.overlay.5.value}' },
                 color: { value: '{colors.neutral.90.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.overlay.90.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5566,13 +5548,7 @@ const button = {
                 backgroundColor: { value: '{colors.blue.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.blue.100.value}',
-                    },
+                    value: '{components.fieldcontrol.info._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5595,13 +5571,7 @@ const button = {
                 backgroundColor: { value: '{colors.orange.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.orange.100.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5624,13 +5594,7 @@ const button = {
                 backgroundColor: { value: '{colors.red.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.red.100.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5653,13 +5617,7 @@ const button = {
                 backgroundColor: { value: '{colors.green.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.green.100.value}',
-                    },
+                    value: '{components.fieldcontrol.success._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5682,13 +5640,7 @@ const button = {
                 backgroundColor: { value: '{colors.overlay.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.overlay.90.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5766,13 +5718,7 @@ const button = {
                 backgroundColor: { value: '{colors.blue.10.value}' },
                 color: { value: '{colors.blue.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.blue.100.value}',
-                    },
+                    value: '{components.fieldcontrol.info._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5795,13 +5741,7 @@ const button = {
                 backgroundColor: { value: '{colors.orange.10.value}' },
                 color: { value: '{colors.orange.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.orange.100.value}',
-                    },
+                    value: '{components.fieldcontrol.warning._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5824,13 +5764,7 @@ const button = {
                 backgroundColor: { value: '{colors.green.10.value}' },
                 color: { value: '{colors.green.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.green.100.value}',
-                    },
+                    value: '{components.fieldcontrol.success._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5853,13 +5787,7 @@ const button = {
                 backgroundColor: { value: '{colors.red.10.value}' },
                 color: { value: '{colors.red.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.red.100.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5882,13 +5810,7 @@ const button = {
                 backgroundColor: { value: '{colors.overlay.5.value}' },
                 color: { value: '{colors.overlay.90.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.overlay.90.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -6056,16 +5978,8 @@ const checkbox = {
             outlineStyle: { value: 'solid' },
             outlineWidth: { value: '{outlineWidths.medium.value}' },
             outlineOffset: { value: '{outlineOffsets.medium.value}' },
-            borderColor: { value: '{colors.transparent.value}' },
-            boxShadow: {
-                value: {
-                    offsetX: '0px',
-                    offsetY: '0px',
-                    blurRadius: '0px',
-                    spreadRadius: '2px',
-                    color: '{colors.border.focus.value}',
-                },
-            },
+            borderColor: { value: '{colors.border.focus.value}' },
+            boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
         },
         _disabled: {
             borderColor: { value: '{colors.border.disabled.value}' },
@@ -6073,15 +5987,9 @@ const checkbox = {
         _error: {
             borderColor: { value: '{colors.border.error.value}' },
             _focus: {
-                borderColor: { value: '{colors.transparent.value}' },
+                borderColor: { value: '{colors.border.error.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '2px',
-                        color: '{colors.border.error.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
         },
@@ -6410,47 +6318,38 @@ const fieldcontrol = {
         borderBlockStart: { value: 'none' },
         borderRadius: { value: '0' },
         _focus: {
-            borderBlockEndColor: { value: '{colors.border.focus.value}' },
+            borderBlockEndColor: { value: 'transparent' },
             boxShadow: {
-                value: {
-                    offsetX: '0px',
-                    offsetY: '1px',
-                    color: '{colors.border.focus.value}',
-                    blurRadius: '0px',
-                },
+                value: '{components.fieldcontrol._focus.boxShadow.value}',
             },
         },
         _error: {
             borderBlockEndColor: { value: '{colors.border.error.value}' },
             _focus: {
+                borderBlockEndColor: { value: 'transparent' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '1px',
-                        color: '{colors.border.error.value}',
-                        blurRadius: '0px',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
         },
     },
     _focus: {
         // These focus styles have been calibrated to create
-        // a highly visible focus indicator per WCAG 2.1 guidliness:
-        // See: https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html
+        // a highly visible focus indicator per WCAG 2.2 guidlines:
+        // See: https://www.w3.org/TR/WCAG22/#focus-appearance
         //
         // Key features:
-        // * Focus indicator area is at least the 1 CSS px border around the component.
-        // * Contrast between focused and unfocused states has a ratio of 3:1
+        // * Focus indicator area is at least the 2 CSS px perimeter around the component.
+        // * Contrast between focused and unfocused area of contrast has a ratio of 3:1
         //
-        // IMPORTANT: Must recalibrate if `colors.border.primary` or `colors.focus` are changed
+        // IMPORTANT: Must recalibrate if `colors.border.focus` are changed
         borderColor: { value: '{colors.border.focus.value}' },
         boxShadow: {
             value: {
                 offsetX: '0px',
                 offsetY: '0px',
                 blurRadius: '0px',
-                spreadRadius: '1px',
+                spreadRadius: '2px',
                 color: '{colors.border.focus.value}',
             },
         },
@@ -6470,12 +6369,64 @@ const fieldcontrol = {
                     offsetX: '0px',
                     offsetY: '0px',
                     blurRadius: '0px',
-                    spreadRadius: '1px',
+                    spreadRadius: '2px',
                     color: '{colors.border.error.value}',
                 },
             },
         },
     },
+    info: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.blue.100.value}',
+                },
+            },
+        },
+    },
+    warning: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.orange.100.value}',
+                },
+            },
+        },
+    },
+    success: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.green.100.value}',
+                },
+            },
+        },
+    },
+    overlay: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.overlay.90.value}',
+                },
+            },
+        },
+    },
 };
 
 const fieldgroup = {
@@ -7156,15 +7107,7 @@ const sliderfield = {
         },
         _focus: {
             borderColor: { value: '{colors.border.focus.value}' },
-            boxShadow: {
-                value: {
-                    offsetX: '0',
-                    offsetY: '0',
-                    blurRadius: '0',
-                    spreadRadius: '2px',
-                    color: '{colors.border.focus.value}',
-                },
-            },
+            boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
         },
     },
     small: {
@@ -7322,13 +7265,7 @@ const switchfield = {
     },
     _focused: {
         shadow: {
-            value: {
-                offsetX: '0px',
-                offsetY: '0px',
-                blurRadius: '0px',
-                spreadRadius: '2px',
-                color: '{colors.border.focus.value}',
-            },
+            value: '{components.fieldcontrol._focus.boxShadow.value}',
         },
     },
     // Sizes