@aws-amplify/ui 6.0.5 → 6.0.7

package/dist/esm/helpers/authenticator/defaultAuthHubHandler.mjs

@@ -7,7 +7,7 @@ import { isFunction } from '../../utils/utils.mjs';
  * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
  * xstate events.
  */
-const defaultAuthHubHandler = async ({ payload }, service, options) => {
+const defaultAuthHubHandler = ({ payload }, service, options) => {
     const { event } = payload;
     const { send } = service;
     const { onSignIn, onSignOut } = options ?? {};
@@ -32,21 +32,17 @@ const defaultAuthHubHandler = async ({ payload }, service, options) => {
         }
     }
 };
-const getHubEventHandler = (service, handler) => (data) => {
-    handler(data, service);
-};
 /**
  * Listens to external auth Hub events and sends corresponding event to
- * the `authService` of interest
- *
- * @param send - `send` function associated with the `authService` of interest
+ * the `service.send` of interest
  *
+ * @param service - contains state machine `send` function
+ * @param handler - auth event handler
  * @returns function that unsubscribes to the hub evenmt
  */
-const listenToAuthHub = (service, 
-// angular passes its own `handler` param
-handler = defaultAuthHubHandler) => {
-    return Hub.listen('auth', getHubEventHandler(service, handler), 'authenticator-hub-handler');
+const listenToAuthHub = (service, handler = defaultAuthHubHandler) => {
+    const eventHandler = (data) => handler(data, service);
+    return Hub.listen('auth', eventHandler, 'authenticator-hub-handler');
 };
 
 export { defaultAuthHubHandler, listenToAuthHub };

package/dist/esm/machines/authenticator/defaultServices.mjs

@@ -10,6 +10,17 @@ import '../../helpers/accountSettings/utils.mjs';
 
 // Cognito does not allow a password length less then 8 characters
 const DEFAULT_COGNITO_PASSWORD_MIN_LENGTH = 8;
+const isInvalidUserAtributes = (userAttributes) => Array.isArray(userAttributes);
+const parseUserAttributes = (userAttributes) => {
+    if (!userAttributes) {
+        return undefined;
+    }
+    // `aws-amplify` versions <= 6.0.5 return an array of `userAttributes` rather than an object
+    if (isInvalidUserAtributes(userAttributes)) {
+        return Object.entries(userAttributes).map(([_, value]) => Object.keys(value)[0]);
+    }
+    return Object.keys(userAttributes);
+};
 const defaultServices = {
     async getAmplifyConfig() {
         const result = Amplify.getConfig();
@@ -25,9 +36,7 @@ const defaultServices = {
                     : keyValueArray[0];
             })
             : undefined;
-        const parsedSignupAttributes = userAttributes
-            ? Object.entries(userAttributes).map(([_key, value]) => Object.keys(value)[0])
-            : undefined;
+        const parsedSignupAttributes = parseUserAttributes(userAttributes);
         const parsedSocialProviders = loginWith?.oauth?.providers
             ? loginWith.oauth.providers?.map((provider) => provider.toString().toLowerCase())
             : undefined;

package/dist/index.js

@@ -408,7 +408,7 @@ const classNames = (...args) => {
  * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
  * xstate events.
  */
-const defaultAuthHubHandler = async ({ payload }, service, options) => {
+const defaultAuthHubHandler = ({ payload }, service, options) => {
     const { event } = payload;
     const { send } = service;
     const { onSignIn, onSignOut } = options ?? {};
@@ -433,21 +433,17 @@ const defaultAuthHubHandler = async ({ payload }, service, options) => {
         }
     }
 };
-const getHubEventHandler = (service, handler) => (data) => {
-    handler(data, service);
-};
 /**
  * Listens to external auth Hub events and sends corresponding event to
- * the `authService` of interest
- *
- * @param send - `send` function associated with the `authService` of interest
+ * the `service.send` of interest
  *
+ * @param service - contains state machine `send` function
+ * @param handler - auth event handler
  * @returns function that unsubscribes to the hub evenmt
  */
-const listenToAuthHub = (service, 
-// angular passes its own `handler` param
-handler = defaultAuthHubHandler) => {
-    return utils$1.Hub.listen('auth', getHubEventHandler(service, handler), 'authenticator-hub-handler');
+const listenToAuthHub = (service, handler = defaultAuthHubHandler) => {
+    const eventHandler = (data) => handler(data, service);
+    return utils$1.Hub.listen('auth', eventHandler, 'authenticator-hub-handler');
 };
 
 const countryDialCodes = [
@@ -3611,6 +3607,17 @@ const runValidators = async (formData, touchData, passwordSettings, validators)
 
 // Cognito does not allow a password length less then 8 characters
 const DEFAULT_COGNITO_PASSWORD_MIN_LENGTH = 8;
+const isInvalidUserAtributes = (userAttributes) => Array.isArray(userAttributes);
+const parseUserAttributes = (userAttributes) => {
+    if (!userAttributes) {
+        return undefined;
+    }
+    // `aws-amplify` versions <= 6.0.5 return an array of `userAttributes` rather than an object
+    if (isInvalidUserAtributes(userAttributes)) {
+        return Object.entries(userAttributes).map(([_, value]) => Object.keys(value)[0]);
+    }
+    return Object.keys(userAttributes);
+};
 const defaultServices = {
     async getAmplifyConfig() {
         const result = awsAmplify.Amplify.getConfig();
@@ -3626,9 +3633,7 @@ const defaultServices = {
                     : keyValueArray[0];
             })
             : undefined;
-        const parsedSignupAttributes = userAttributes
-            ? Object.entries(userAttributes).map(([_key, value]) => Object.keys(value)[0])
-            : undefined;
+        const parsedSignupAttributes = parseUserAttributes(userAttributes);
         const parsedSocialProviders = loginWith?.oauth?.providers
             ? loginWith.oauth.providers?.map((provider) => provider.toString().toLowerCase())
             : undefined;

package/dist/styles/liveness.css

@@ -5,6 +5,12 @@
   right: var(--amplify-space-medium);
 }
 
+.liveness-detector .amplify-button--primary:focus {
+  box-shadow: unset;
+  outline: var(--amplify-components-button-focus-color) solid 2px;
+  outline-offset: 2px;
+}
+
 .amplify-liveness-cancel-button {
   background-color: #fff;
   color: hsl(190, 95%, 30%);
@@ -39,6 +45,7 @@
   left: 0;
   height: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .amplify-liveness-video {
@@ -108,7 +115,7 @@
 }
 
 .amplify-liveness-instruction-overlay {
-  z-index: 1;
+  z-index: 2;
 }
 
 .amplify-liveness-countdown-container {
@@ -342,6 +349,10 @@
   font-weight: var(--amplify-font-weights-bold);
 }
 
+.amplify-liveness-hint--mobile {
+  margin-top: var(--amplify-space-xxxl);
+}
+
 .amplify-liveness-hint__text {
   align-items: center;
   gap: var(--amplify-space-xs);
@@ -419,5 +430,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
   height: 480px;
 }

package/dist/styles/liveness.layer.css

@@ -6,6 +6,12 @@
   right: var(--amplify-space-medium);
 }
 
+.liveness-detector .amplify-button--primary:focus {
+  box-shadow: unset;
+  outline: var(--amplify-components-button-focus-color) solid 2px;
+  outline-offset: 2px;
+}
+
 .amplify-liveness-cancel-button {
   background-color: #fff;
   color: hsl(190, 95%, 30%);
@@ -40,6 +46,7 @@
   left: 0;
   height: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .amplify-liveness-video {
@@ -109,7 +116,7 @@
 }
 
 .amplify-liveness-instruction-overlay {
-  z-index: 1;
+  z-index: 2;
 }
 
 .amplify-liveness-countdown-container {
@@ -343,6 +350,10 @@
   font-weight: var(--amplify-font-weights-bold);
 }
 
+.amplify-liveness-hint--mobile {
+  margin-top: var(--amplify-space-xxxl);
+}
+
 .amplify-liveness-hint__text {
   align-items: center;
   gap: var(--amplify-space-xs);
@@ -420,6 +431,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
   height: 480px;
 }
 }

package/dist/styles/table.css

@@ -80,6 +80,9 @@
     var(--amplify-components-table-header-border-width)
     var(--amplify-components-table-header-border-width);
 }
+.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+  background-color: var(--amplify-components-table-row-striped-background-color);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -138,9 +141,6 @@
 .amplify-table__td:last-child {
   border-right-width: var(--amplify-components-table-data-border-width);
 }
-.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
-  background-color: var(--amplify-components-table-row-striped-background-color);
-}
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }

package/dist/styles/table.layer.css

@@ -81,6 +81,9 @@
     var(--amplify-components-table-header-border-width)
     var(--amplify-components-table-header-border-width);
 }
+.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+  background-color: var(--amplify-components-table-row-striped-background-color);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -139,9 +142,6 @@
 .amplify-table__td:last-child {
   border-right-width: var(--amplify-components-table-data-border-width);
 }
-.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
-  background-color: var(--amplify-components-table-row-striped-background-color);
-}
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }

package/dist/styles.css

@@ -3911,6 +3911,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   right: var(--amplify-space-medium);
 }
 
+.liveness-detector .amplify-button--primary:focus {
+  box-shadow: unset;
+  outline: var(--amplify-components-button-focus-color) solid 2px;
+  outline-offset: 2px;
+}
+
 .amplify-liveness-cancel-button {
   background-color: #fff;
   color: hsl(190, 95%, 30%);
@@ -3945,6 +3951,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   left: 0;
   height: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .amplify-liveness-video {
@@ -4014,7 +4021,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-liveness-instruction-overlay {
-  z-index: 1;
+  z-index: 2;
 }
 
 .amplify-liveness-countdown-container {
@@ -4248,6 +4255,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   font-weight: var(--amplify-font-weights-bold);
 }
 
+.amplify-liveness-hint--mobile {
+  margin-top: var(--amplify-space-xxxl);
+}
+
 .amplify-liveness-hint__text {
   align-items: center;
   gap: var(--amplify-space-xs);
@@ -4325,6 +4336,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
   height: 480px;
 }
 
@@ -5327,6 +5339,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
     var(--amplify-components-table-header-border-width)
     var(--amplify-components-table-header-border-width);
 }
+.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+  background-color: var(--amplify-components-table-row-striped-background-color);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -5385,9 +5400,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table__td:last-child {
   border-right-width: var(--amplify-components-table-data-border-width);
 }
-.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
-  background-color: var(--amplify-components-table-row-striped-background-color);
-}
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }

package/dist/styles.layer.css

@@ -3912,6 +3912,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   right: var(--amplify-space-medium);
 }
 
+.liveness-detector .amplify-button--primary:focus {
+  box-shadow: unset;
+  outline: var(--amplify-components-button-focus-color) solid 2px;
+  outline-offset: 2px;
+}
+
 .amplify-liveness-cancel-button {
   background-color: #fff;
   color: hsl(190, 95%, 30%);
@@ -3946,6 +3952,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   left: 0;
   height: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .amplify-liveness-video {
@@ -4015,7 +4022,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-liveness-instruction-overlay {
-  z-index: 1;
+  z-index: 2;
 }
 
 .amplify-liveness-countdown-container {
@@ -4249,6 +4256,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   font-weight: var(--amplify-font-weights-bold);
 }
 
+.amplify-liveness-hint--mobile {
+  margin-top: var(--amplify-space-xxxl);
+}
+
 .amplify-liveness-hint__text {
   align-items: center;
   gap: var(--amplify-space-xs);
@@ -4326,6 +4337,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
   height: 480px;
 }
 
@@ -5328,6 +5340,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
     var(--amplify-components-table-header-border-width)
     var(--amplify-components-table-header-border-width);
 }
+.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+  background-color: var(--amplify-components-table-row-striped-background-color);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -5386,9 +5401,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table__td:last-child {
   border-right-width: var(--amplify-components-table-data-border-width);
 }
-.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
-  background-color: var(--amplify-components-table-row-striped-background-color);
-}
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }

package/dist/types/helpers/authenticator/defaultAuthHubHandler.d.ts

@@ -6,10 +6,10 @@ import { AuthInterpreter, AuthMachineHubHandler } from './types';
 export declare const defaultAuthHubHandler: AuthMachineHubHandler;
 /**
  * Listens to external auth Hub events and sends corresponding event to
- * the `authService` of interest
- *
- * @param send - `send` function associated with the `authService` of interest
+ * the `service.send` of interest
  *
+ * @param service - contains state machine `send` function
+ * @param handler - auth event handler
  * @returns function that unsubscribes to the hub evenmt
  */
 export declare const listenToAuthHub: (service: AuthInterpreter, handler?: AuthMachineHubHandler) => import("@aws-amplify/core/dist/esm/Hub/types").StopListenerCallback;

package/dist/types/helpers/authenticator/types.d.ts

@@ -23,4 +23,4 @@ export type AuthMachineSend = AuthInterpreter['send'];
 export type AuthMachineHubHandler = (data: HubCapsule<any, any>, service: AuthInterpreter, options?: {
     onSignIn?: (user: AuthUser) => void;
     onSignOut?: () => void;
-}) => Promise<void>;
+}) => void;

package/dist/types/machines/authenticator/defaultServices.d.ts

@@ -1,9 +1,10 @@
+import { UserAttributeKey } from 'aws-amplify/auth';
 import { confirmResetPassword, confirmSignIn, confirmSignUp, resetPassword, signIn, signUp } from 'aws-amplify/auth';
-import { AuthFormData, AuthTouchData, PasswordSettings, SignUpAttribute, SocialProvider, ValidatorResult } from '../../types';
+import { AuthFormData, AuthTouchData, PasswordSettings, SocialProvider, ValidatorResult } from '../../types';
 export declare const defaultServices: {
     getAmplifyConfig(): Promise<{
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         identityPoolId: string;
         allowGuestAccess?: boolean;
@@ -17,7 +18,7 @@ export declare const defaultServices: {
         passwordFormat?: never;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         userPoolClientId: string;
         userPoolId: string;
@@ -48,7 +49,7 @@ export declare const defaultServices: {
         allowGuestAccess?: never;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         identityPoolId: never;
         allowGuestAccess?: never;
@@ -62,7 +63,7 @@ export declare const defaultServices: {
         passwordFormat?: never;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         identityPoolId: string;
         allowGuestAccess?: boolean;
@@ -76,7 +77,7 @@ export declare const defaultServices: {
         passwordFormat?: never;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         userPoolClientId: never;
         userPoolId: never;
@@ -90,7 +91,7 @@ export declare const defaultServices: {
         allowGuestAccess?: never;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         userPoolClientId: string;
         userPoolId: string;
@@ -121,7 +122,7 @@ export declare const defaultServices: {
         allowGuestAccess?: never;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         userPoolClientId: never;
         userPoolId: never;
@@ -135,7 +136,7 @@ export declare const defaultServices: {
         allowGuestAccess?: boolean;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         userPoolClientId: string;
         userPoolId: string;
@@ -166,7 +167,7 @@ export declare const defaultServices: {
         allowGuestAccess?: never;
     } | {
         loginMechanisms: ("email" | "phone_number" | "username")[];
-        signUpAttributes: SignUpAttribute[];
+        signUpAttributes: UserAttributeKey[];
         socialProviders: SocialProvider[];
         userPoolClientId: string;
         userPoolId: string;

package/dist/types/types/displayText.d.ts

@@ -51,9 +51,14 @@ type GetPrefix = 'get';
  */
 type DisplayTextBody = string;
 type DisplayTextSuffix = FieldSuffix | TextSuffix;
-type GetDisplayTextKey = `${GetPrefix}${DisplayTextBody}${DisplayTextSuffix}`;
-type DisplayTextKey = `${DisplayTextBody}${DisplayTextSuffix}`;
-type DisplayTextBase = Record<GetDisplayTextKey, (...args: any) => string | undefined> | Record<DisplayTextKey, string>;
+type DisplayTextFunctionKey = `${GetPrefix}${DisplayTextBody}${DisplayTextSuffix}`;
+type DisplayTextStringKey = `${DisplayTextBody}${DisplayTextSuffix}`;
+type DisplayTextFunction = (...args: any) => string | undefined;
+type DisplayTextFunctions = Record<DisplayTextFunctionKey, DisplayTextFunction>;
+type DisplayTextStrings = Record<DisplayTextStringKey, string>;
+type IsDisplayTextFunction<T, K> = T extends DisplayTextFunctionKey ? K extends DisplayTextFunction ? T : never : never;
+type IsDisplayTextString<T, K> = T extends DisplayTextStringKey ? K extends string ? T : never : never;
+type FilterDisplayText<T, K> = IsDisplayTextFunction<T, K> | IsDisplayTextString<T, K>;
 /**
  * Display Text type utility for creating standardized `DisplayText` interfaces
  * for usage as public exports and extended with `Required` for default values.
@@ -66,6 +71,7 @@ type DisplayTextBase = Record<GetDisplayTextKey, (...args: any) => string | unde
  * type SomeComponentDisplayText = DisplayTextTemplate<{
  *   getCopyButtonText?: GetCopyButtonText;
  *   submitButtonText?: string;
+ *   usernameFieldLabel?: string;
  * }>;
  *
  * // default interface
@@ -74,11 +80,12 @@ type DisplayTextBase = Record<GetDisplayTextKey, (...args: any) => string | unde
  * // default values
  * const someComponentDisplayText: SomeComponentDisplayTextDefault = {
  *   getCopyButtonText: (hasCopied) => (hasCopied ? 'Copied' : 'Copy'),
- *   submitButtonText: 'Submit'
+ *   submitButtonText: 'Submit',
+ *   usernameFieldLabel: 'Username',
  * };
  * ```
  */
-export type DisplayTextTemplate<T extends DisplayTextBase> = {
-    [K in keyof T]: K extends GetDisplayTextKey | DisplayTextKey ? T[K] : never;
+export type DisplayTextTemplate<T extends DisplayTextFunctions | DisplayTextStrings> = {
+    [K in keyof T as FilterDisplayText<K, T[K]>]: T[K];
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "6.0.5",
+  "version": "6.0.7",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {