@aws-amplify/ui 4.1.0 → 5.0.0

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Tue, 08 Nov 2022 23:57:24 GMT
+ * Generated on Mon, 14 Nov 2022 16:53:03 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -255,6 +255,15 @@
   --amplify-components-loader-linear-width: 100%;
   --amplify-components-loader-animation-duration: 1s;
   --amplify-components-loader-stroke-linecap: round;
+  --amplify-components-inappmessaging-dialog-width: 30vw;
+  --amplify-components-inappmessaging-dialog-min-width: 400px;
+  --amplify-components-inappmessaging-dialog-min-height: 400px;
+  --amplify-components-inappmessaging-dialog-height: 50vh;
+  --amplify-components-inappmessaging-button-color: black;
+  --amplify-components-inappmessaging-button-border-radius: 5px;
+  --amplify-components-inappmessaging-button-background-color: #e8e8e8;
+  --amplify-components-inappmessaging-banner-width: 400px ;
+  --amplify-components-inappmessaging-banner-height: 150px ;
   --amplify-components-image-object-position: initial;
   --amplify-components-image-object-fit: initial;
   --amplify-components-image-height: auto;
@@ -521,6 +530,8 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
+  --amplify-components-inappmessaging-header-font-weight: 800;
+  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
   --amplify-components-highlightmatch-highlighted-font-weight: 700;
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
@@ -990,7 +1001,7 @@ html,
 
 @supports (font-variation-settings: normal) {
   html,
-[data-amplify-theme] {
+  [data-amplify-theme] {
     font-family: var(--amplify-fonts-default-variable);
   }
 }
@@ -2503,7 +2514,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
-[data-radix-popper-content-wrapper] {
+.amplify-menu-content-wrapper {
   z-index: 999999;
 }
 
@@ -3873,6 +3884,186 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
 
+.amplify-inappmessaging-backdrop {
+  background-color: var(--amplify-colors-overlay-50);
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-backdrop-content-container {
+  align-items: center;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  z-index: 1001;
+}
+
+.amplify-inappmessaging-backdrop-content {
+  pointer-events: auto;
+}
+
+.amplify-inappmessaging-bannermessage {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-banner-height);
+  margin: var(--amplify-space-small);
+  max-width: 50%;
+  position: fixed;
+  width: var(--amplify-components-inappmessaging-banner-width);
+}
+.amplify-inappmessaging-bannermessage--top {
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--middle {
+  bottom: 0;
+  margin: auto var(--amplify-space-small);
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--bottom {
+  bottom: 0;
+}
+.amplify-inappmessaging-bannermessage--left {
+  left: 0;
+}
+.amplify-inappmessaging-bannermessage--center {
+  left: 0;
+  margin: var(--amplify-space-small) auto;
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--right {
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--center-middle {
+  inset: 0;
+  margin: auto;
+}
+.amplify-inappmessaging-bannermessage--full-width {
+  max-width: initial;
+  width: calc(100% - 2 * var(--amplify-space-small));
+}
+
+.amplify-inappmessaging-fullscreenmessage {
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-fullscreenmessage--fullscreen {
+  height: auto;
+  inset: 0;
+  position: fixed;
+  width: auto;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-messagelayout {
+  background-color: var(--amplify-colors-background-primary);
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--amplify-space-xxxs);
+  max-width: 100%;
+  padding: var(--amplify-space-medium);
+}
+.amplify-inappmessaging-messagelayout__button {
+  border-width: 0;
+  width: 100%;
+}
+.amplify-inappmessaging-messagelayout__button, .amplify-inappmessaging-messagelayout__button:active, .amplify-inappmessaging-messagelayout__button:visited, .amplify-inappmessaging-messagelayout__button:hover, .amplify-inappmessaging-messagelayout__button:focus {
+  background-color: var(--amplify-components-inappmessaging-button-background-color);
+  border-radius: var(--amplify-components-inappmessaging-button-border-radius);
+  color: var(--amplify-components-inappmessaging-button-color);
+}
+.amplify-inappmessaging-messagelayout__button--dark:active, .amplify-inappmessaging-messagelayout__button--dark:visited, .amplify-inappmessaging-messagelayout__button--light:active, .amplify-inappmessaging-messagelayout__button--light:visited {
+  filter: brightness(100%);
+}
+.amplify-inappmessaging-messagelayout__button--dark:hover, .amplify-inappmessaging-messagelayout__button--dark:focus {
+  filter: brightness(120%);
+}
+.amplify-inappmessaging-messagelayout__button--light:hover, .amplify-inappmessaging-messagelayout__button--light:focus {
+  filter: brightness(80%);
+}
+.amplify-inappmessaging-messagelayout__close-button {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:active, .amplify-inappmessaging-messagelayout__close-button:visited {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:hover, .amplify-inappmessaging-messagelayout__close-button:focus {
+  color: var(--amplify-colors-neutral-100);
+}
+.amplify-inappmessaging-messagelayout__content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.amplify-inappmessaging-messagelayout__content--horizontal {
+  flex-direction: row;
+}
+.amplify-inappmessaging-messagelayout__content--vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.amplify-inappmessaging-messagelayout__header {
+  flex-shrink: 0;
+  font-size: var(--amplify-components-inappmessaging-header-font-size);
+  font-weight: var(--amplify-components-inappmessaging-header-font-weight);
+}
+.amplify-inappmessaging-messagelayout__image-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.amplify-inappmessaging-messagelayout__image-container img {
+  max-height: 100%;
+  max-width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  position: absolute;
+}
+.amplify-inappmessaging-messagelayout__image-container--horizontal {
+  max-width: 15%;
+  min-width: 15%;
+}
+.amplify-inappmessaging-messagelayout__image-container--vertical {
+  max-height: 40%;
+  min-height: 40%;
+}
+.amplify-inappmessaging-messagelayout__text-container {
+  flex-direction: column;
+  overflow-y: auto;
+  gap: var(--amplify-space-xxxs);
+}
+.amplify-inappmessaging-messagelayout__text-container--horizontal {
+  flex-grow: 1;
+}
+.amplify-inappmessaging-messagelayout__text-container--vertical {
+  flex-grow: 0;
+}
+
+.amplify-inappmessaging-modalmessage {
+  align-items: center;
+  height: initial;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  width: initial;
+  z-index: 1000;
+}
+.amplify-inappmessaging-modalmessage__dialog {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  pointer-events: auto;
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-modalmessage__dialog--full-width {
+  width: 100%;
+  margin: var(--amplify-space-small);
+}
+
 [data-label-position=start] {
   flex-direction: row;
 }

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 08 Nov 2022 23:57:24 GMT
+ * Generated on Mon, 14 Nov 2022 16:53:03 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -253,6 +253,15 @@
   --amplify-components-loader-linear-width: 100%;
   --amplify-components-loader-animation-duration: 1s;
   --amplify-components-loader-stroke-linecap: round;
+  --amplify-components-inappmessaging-dialog-width: 30vw;
+  --amplify-components-inappmessaging-dialog-min-width: 400px;
+  --amplify-components-inappmessaging-dialog-min-height: 400px;
+  --amplify-components-inappmessaging-dialog-height: 50vh;
+  --amplify-components-inappmessaging-button-color: black;
+  --amplify-components-inappmessaging-button-border-radius: 5px;
+  --amplify-components-inappmessaging-button-background-color: #e8e8e8;
+  --amplify-components-inappmessaging-banner-width: 400px ;
+  --amplify-components-inappmessaging-banner-height: 150px ;
   --amplify-components-image-object-position: initial;
   --amplify-components-image-object-fit: initial;
   --amplify-components-image-height: auto;
@@ -519,6 +528,8 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
+  --amplify-components-inappmessaging-header-font-weight: 800;
+  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
   --amplify-components-highlightmatch-highlighted-font-weight: 700;
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;

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

@@ -5,7 +5,7 @@
  */
 import { Sender } from 'xstate';
 import { AuthEvent, AuthEventData, AuthMachineState, CodeDeliveryDetails, AmplifyUser, ValidationError, SocialProvider, UnverifiedContactMethods } from '../../types';
-export declare type AuthenticatorRoute = 'authenticated' | 'autoSignIn' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'idle' | 'resetPassword' | 'setup' | 'signOut' | 'setupTOTP' | 'signIn' | 'signUp' | 'verifyUser';
+export declare type AuthenticatorRoute = 'authenticated' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'idle' | 'resetPassword' | 'setup' | 'signOut' | 'setupTOTP' | 'signIn' | 'signUp' | 'transition' | 'verifyUser';
 declare type AuthenticatorValidationErrors = ValidationError;
 declare type AuthStatus = 'configuring' | 'authenticated' | 'unauthenticated';
 interface AuthenticatorServiceContextFacade {

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

@@ -5,3 +5,4 @@ export * from './constants';
 export * from './form';
 export * from './utils';
 export * from './formFields';
+export * from './textUtil';

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

@@ -0,0 +1,44 @@
+import { AuthChallengeName, CodeDeliveryDetails, SocialProvider } from '../../types';
+import { AuthenticatorRoute } from './facade';
+export declare const authenticatorTextUtil: {
+    /** Shared */
+    readonly getBackToSignInText: () => string;
+    readonly getChangePasswordText: () => string;
+    readonly getChangingText: () => string;
+    readonly getConfirmText: () => string;
+    readonly getConfirmingText: () => string;
+    readonly getCopyText: () => string;
+    readonly getResendCodeText: () => string;
+    readonly getSendCodeText: () => string;
+    readonly getSendingText: () => string;
+    readonly getSubmitText: () => string;
+    readonly getSubmittingText: () => string;
+    readonly getLoadingText: () => string;
+    /** SignInSignUpTabs */
+    readonly getSignInTabText: () => string;
+    readonly getSignUpTabText: () => string;
+    /** SignIn */
+    readonly getForgotPasswordText: () => string;
+    readonly getSigningInText: () => string;
+    readonly getSignInText: () => string;
+    /** SignUp */
+    readonly getCreatingAccountText: () => string;
+    readonly getCreateAccountText: () => string;
+    /** ConfirmSignUp */
+    readonly getDeliveryMessageText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
+    readonly getDeliveryMethodText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
+    /** ConfirmSignIn */
+    readonly getChallengeText: (challengeName: AuthChallengeName) => string;
+    /** ResetPassword */
+    readonly getResetYourPasswordText: () => string;
+    /** SetupTOTP */
+    readonly getSetupTOTPText: () => string;
+    readonly getCopiedText: () => string;
+    /** FederatedSignIn */
+    readonly getSignInWithFederationText: (route: AuthenticatorRoute, provider: SocialProvider) => string;
+    /** VerifyUser */
+    readonly getSkipText: () => string;
+    readonly getVerifyText: () => string;
+    readonly getVerifyContactText: () => string;
+    readonly getAccountRecoveryInfoText: () => string;
+};

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

@@ -2,10 +2,14 @@
  * This file contains general helpers that state machine or authenticator
  * implementations can use.
  */
-import { AuthInterpreter, HubHandler } from '../../types';
+import { AuthInterpreter, AuthMachineHubHandler } from '../../types';
 export declare const censorAllButFirstAndLast: (value: string) => string;
 export declare const censorPhoneNumber: (val: string) => string;
-export declare const defaultAuthHubHandler: HubHandler;
+/**
+ * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
+ * xstate events.
+ */
+export declare const defaultAuthHubHandler: AuthMachineHubHandler;
 /**
  * Listens to external auth Hub events and sends corresponding event to
  * the `authService` of interest
@@ -14,6 +18,6 @@ export declare const defaultAuthHubHandler: HubHandler;
  *
  * @returns function that unsubscribes to the hub evenmt
  */
-export declare const listenToAuthHub: (service: AuthInterpreter, handler?: HubHandler) => () => void;
+export declare const listenToAuthHub: (service: AuthInterpreter, handler?: AuthMachineHubHandler) => () => void;
 export declare const hasSpecialChars: (password: string) => boolean;
 export declare const getTotpCodeURL: (issuer: string, username: string, secret: string) => string;

package/dist/types/i18n/dictionaries/authenticator/defaultTexts.d.ts

@@ -20,7 +20,6 @@ export declare const defaultTexts: {
     FAMILY_NAME: string;
     GIVEN_NAME: string;
     FORGOT_YOUR_PASSWORD: string;
-    FORGOT_YOUR_PASSWORD_LEGACY: string;
     HIDE_PASSWORD: string;
     LOADING: string;
     LOGIN_NAME: string;

package/dist/types/i18n/dictionaries/index.d.ts

@@ -800,7 +800,6 @@ export declare const defaultTexts: {
     FAMILY_NAME: string;
     GIVEN_NAME: string;
     FORGOT_YOUR_PASSWORD: string;
-    FORGOT_YOUR_PASSWORD_LEGACY: string;
     HIDE_PASSWORD: string;
     LOADING: string;
     LOGIN_NAME: string;

package/dist/types/i18n/translations.d.ts

@@ -32,7 +32,6 @@ export declare const DefaultTexts: {
     readonly FAMILY_NAME: string;
     readonly GIVEN_NAME: string;
     readonly FORGOT_YOUR_PASSWORD: string;
-    readonly FORGOT_YOUR_PASSWORD_LEGACY: string;
     readonly HIDE_PASSWORD: string;
     readonly LOADING: string;
     readonly LOGIN_NAME: string;

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

@@ -1,8 +1,9 @@
+/// <reference types="amazon-cognito-identity-js" />
 import { AuthChallengeName, PasswordSettings, SignInResult, ValidatorResult } from '../../types';
 export declare const defaultServices: {
     getAmplifyConfig(): Promise<{}>;
     getCurrentUser(): Promise<any>;
-    handleSignUp(formData: any): Promise<any>;
+    handleSignUp(formData: any): Promise<import("amazon-cognito-identity-js").ISignUpResult>;
     handleSignIn({ username, password, }: {
         username: string;
         password: string;

package/dist/types/theme/tokens/components/inAppMessaging.d.ts

@@ -0,0 +1,28 @@
+import { BorderRadiusValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, SpaceValue } from '../types/designToken';
+interface BannerTokens {
+    height: DesignToken<SpaceValue>;
+    width: DesignToken<SpaceValue>;
+}
+interface ButtonTokens {
+    backgroundColor: DesignToken<ColorValue>;
+    borderRadius: DesignToken<BorderRadiusValue>;
+    color: DesignToken<ColorValue>;
+}
+interface DialogTokens {
+    height: DesignToken<SpaceValue>;
+    minHeight: DesignToken<SpaceValue>;
+    minWidth: DesignToken<SpaceValue>;
+    width: DesignToken<SpaceValue>;
+}
+interface HeaderTokens {
+    fontSize: DesignToken<FontSizeValue>;
+    fontWeight: DesignToken<FontWeightValue>;
+}
+export interface InAppMessagingTokens {
+    banner: BannerTokens;
+    button: ButtonTokens;
+    dialog: DialogTokens;
+    header: HeaderTokens;
+}
+export declare const inappmessaging: InAppMessagingTokens;
+export {};

package/dist/types/theme/tokens/components/index.d.ts

@@ -20,6 +20,7 @@ import { HeadingTokens } from './heading';
 import { HighlightMatchTokens } from './highlightMatch';
 import { IconTokens } from './icon';
 import { ImageTokens } from './image';
+import { InAppMessagingTokens } from './inAppMessaging';
 import { LinkTokens } from './link';
 import { LoaderTokens } from './loader';
 import { MenuTokens } from './menu';
@@ -66,6 +67,7 @@ export interface ComponentTokens {
     icon: IconTokens;
     highlightmatch: HighlightMatchTokens;
     image: ImageTokens;
+    inappmessaging: InAppMessagingTokens;
     link: LinkTokens;
     loader: LoaderTokens;
     menu: MenuTokens;

package/dist/types/types/authenticator/stateMachine/authMachine.d.ts

@@ -16,4 +16,8 @@ export declare type AuthInterpreter = Interpreter<AuthContext, any, AuthEvent, a
  * Function type for `send` in `authMachine`
  */
 export declare type AuthMachineSend = AuthInterpreter['send'];
-export declare type HubHandler = (data: HubCapsule, service: AuthInterpreter) => void;
+/**
+ * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
+ * xstate events.
+ */
+export declare type AuthMachineHubHandler = (data: HubCapsule, service: AuthInterpreter) => Promise<void>;

package/dist/types/types/authenticator/stateMachine/event.d.ts

@@ -5,7 +5,7 @@ export declare type InvokeActorEventTypes = 'done.invoke.signInActor' | 'done.in
 /**
  * All known explicit events for xstate
  */
-export declare type AuthEventTypes = 'CHANGE' | 'BLUR' | 'FEDERATED_SIGN_IN' | 'RESEND' | 'RESET_PASSWORD' | 'SIGN_IN' | 'SIGN_OUT' | 'SIGN_UP' | 'SKIP' | 'SUBMIT' | 'INIT' | 'TOKEN_REFRESH' | InvokeActorEventTypes;
+export declare type AuthEventTypes = 'CHANGE' | 'BLUR' | 'FEDERATED_SIGN_IN' | 'RESEND' | 'RESET_PASSWORD' | 'AUTO_SIGN_IN' | 'AUTO_SIGN_IN_FAILURE' | 'SIGN_IN' | 'SIGN_OUT' | 'SIGN_UP' | 'SKIP' | 'SUBMIT' | 'INIT' | 'TOKEN_REFRESH' | InvokeActorEventTypes;
 /**
  * Data payload for auth events
  */

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

@@ -67,6 +67,7 @@ export declare enum ComponentClassName {
     LoaderDeterminate = "amplify-loader--determinate",
     LoaderPercentageText = "amplify-loader__percentage-text",
     MenuContent = "amplify-menu-content",
+    MenuContentWrapper = "amplify-menu-content-wrapper",
     MenuItem = "amplify-menu-content__item",
     MenuTrigger = "amplify-menu-trigger",
     Pagination = "amplify-pagination",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -8,6 +8,7 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
     },
+    "./package.json": "./package.json",
     "./styles.css": "./dist/styles.css",
     "./theme.css": "./dist/theme.css"
   },
@@ -45,7 +46,7 @@
     "tslib": "2.4.0"
   },
   "peerDependencies": {
-    "aws-amplify": "3.x.x || 4.x.x",
+    "aws-amplify": "5.x.x",
     "xstate": "^4.33.6"
   },
   "peerDependenciesMeta": {