@aws-amplify/ui 3.3.0 → 3.4.0

package/dist/types/theme/tokens/time.d.ts

@@ -0,0 +1,10 @@
+import { DesignToken, WebDesignToken, TimeValue } from './types/designToken';
+export declare type Time = {
+    short: DesignToken<TimeValue>;
+    medium: DesignToken<TimeValue>;
+    long: DesignToken<TimeValue>;
+};
+export declare type WebTime = {
+    [Property in keyof Time]: WebDesignToken<TimeValue>;
+};
+export declare const time: Time;

package/dist/types/theme/tokens/transforms.d.ts

@@ -0,0 +1,14 @@
+import { DesignToken, WebDesignToken, TransformValue } from './types/designToken';
+export declare type Transforms = {
+    slideX: {
+        small: DesignToken<TransformValue>;
+        medium: DesignToken<TransformValue>;
+        large: DesignToken<TransformValue>;
+    };
+};
+export declare type WebTransforms = {
+    slideX: {
+        [Property in keyof Transforms['slideX']]: WebDesignToken<TransformValue>;
+    };
+};
+export declare const transforms: Transforms;

package/dist/types/theme/tokens/types/designToken.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Helper function to test if something is a design token or not.
+ * Used in the React component style props.
+ *
+ * @param arg - thing to test if it is a design token or not
+ * @returns boolean
+ */
+export declare function isDesignToken(arg: unknown): arg is WebDesignToken;
+/**
+ *
+ */
+export declare type DesignToken<ValueType = any> = {
+    value: ValueType;
+};
+/**
+ * A fully setup design token ready to be used in web platform.
+ */
+export declare type WebDesignToken<ValueType = any> = {
+    /**
+     * Name of the design token
+     */
+    name: string;
+    /**
+     * Object path of the design token. Used for constructing the name
+     */
+    path: Array<string>;
+    /**
+     * Original (unresolved, untransformed) value of the design token
+     */
+    original: ValueType;
+    /**
+     * The wrapped CSS variable name of this design token, for example
+     * `var(--amplify-colors-font-primary)`
+     */
+    toString(): string;
+} & DesignToken<ValueType>;
+export declare type ColorValue = string;
+export declare type BorderWidthValue = string;
+export declare type FontValue = string;
+export declare type FontSizeValue = string;
+export declare type FontWeightValue = number;
+export declare type LineHeightValue = string;
+export declare type OpacityValue = string;
+export declare type OutlineOffsetValue = string;
+export declare type OutlineWidthValue = string;
+export declare type RadiusValue = string;
+export declare type ShadowValue = {
+    offsetX: string;
+    offsetY: string;
+    blurRadius: string;
+    spreadRadius?: string;
+    color: string;
+};
+export declare type SpaceValue = string;
+export declare type TimeValue = string;
+export declare type TransformValue = string;

package/dist/types/theme/tokens/types/scales.d.ts

@@ -0,0 +1,12 @@
+import { DesignToken, ColorValue } from './designToken';
+export interface OrdinalScale<DesignTokenType = DesignToken<ColorValue>> {
+    primary: DesignTokenType;
+    secondary: DesignTokenType;
+    tertiary: DesignTokenType;
+}
+export interface OrdinalVariation<DesignTokenType = DesignToken<ColorValue>> {
+    info: DesignTokenType;
+    warning: DesignTokenType;
+    error: DesignTokenType;
+    success: DesignTokenType;
+}

package/dist/types/theme/types.d.ts

@@ -0,0 +1,110 @@
+import { PartialDeep } from 'type-fest';
+import { Tokens, WebTokens } from './tokens';
+import { Breakpoints } from './breakpoints';
+export * from './tokens/types/designToken';
+/**
+ * An override is a set of tokens that override others
+ * in certain contexts. On Android, these are like resource
+ * qualifiers. On the web, these are like media queries with
+ * a set of CSS variables in it. A theme should contain
+ * everything it needs to render
+ */
+export declare type Override = SelectorOverride | MediaQueryOverride | BreakpointOverride | ColorModeOverride;
+interface BaseOverride {
+    tokens?: PartialDeep<Tokens>;
+}
+/**
+ * This override takes a breakpoint name and creates a media-query for that
+ * breakpoint
+ * ```css
+ * @media (min-width: 20em) {
+ *    [data-amplify-theme] {
+ *      --amplify-font-size-large: 2rem;
+ *    }
+ * }
+ * ```
+ */
+interface BreakpointOverride extends BaseOverride {
+    breakpoint: keyof Breakpoints['values'];
+}
+/**
+ * ```css
+ * @media (prefers-color-scheme: dark) {
+ *    --amplify-colors-background-primary: black;
+ *    --amplify-colors-font-primary: white;
+ * }
+ * ```
+ */
+export interface MediaQueryOverride extends BaseOverride {
+    mediaQuery: string;
+}
+/**
+ * ```css
+ * .disco-theme {
+ *    --amplify-colors-background-primary: pink;
+ * }
+ * [data-my-cool-theme] {
+ *    --amplify-colors-font-primary: purple;
+ * }
+ * ```
+ */
+export interface SelectorOverride extends BaseOverride {
+    selector: string;
+}
+declare type ColorMode = 'light' | 'dark';
+/**
+ * This creates a color mode override, where the color mode is 'light' or 'dark'.
+ * Note: there is no 'system' here.
+ *
+ * ```css
+ * @media(prefers-color-scheme: dark) {
+ *    [data-amplify-color-mode="system"] {
+ *    }
+ * }
+ *
+ * [data-amplify-color-mode="dark"] {
+ *
+ * }
+ * ```
+ */
+export interface ColorModeOverride extends BaseOverride {
+    colorMode: ColorMode;
+}
+/**
+ * A Theme just needs a name. This is what a user would generally deal with.
+ * They can define any tokens or breakpoints they need, but they don't need a
+ * complete theme with all tokens.
+ */
+export interface Theme {
+    /**
+     * The name of the theme. This is used to create scoped CSS to allow for
+     * multiple themes on a page.
+     */
+    name: string;
+    tokens?: PartialDeep<Tokens>;
+    breakpoints?: PartialDeep<Breakpoints>;
+    /**
+     * Overrides allow you to change design tokens in different contexts, like
+     * light and dark mode. You can also have other media query overrides as well
+     * as breakpoint overrides which correspond to the Breakpoints on a theme,
+     * and a generic selector override.
+     */
+    overrides?: Array<Override>;
+}
+/**
+ * A BaseTheme has all tokens and breakpoints required
+ */
+export interface BaseTheme extends Theme {
+    tokens: Tokens;
+    breakpoints: Breakpoints;
+    overrides?: Array<Override>;
+}
+/**
+ * WebTheme is a fully built theme that has cssText based
+ * on the design tokens and all design tokens have added fields
+ * to be used in Javascript/Typescript.
+ */
+export interface WebTheme extends BaseTheme {
+    tokens: WebTokens;
+    cssText: string;
+}

package/dist/types/theme/utils.d.ts

@@ -0,0 +1,8 @@
+import { DesignToken } from './tokens/types/designToken';
+export declare const CSS_VARIABLE_PREFIX = "amplify";
+export declare function cssValue(token: DesignToken): any;
+interface NameTransformProps {
+    path?: Array<string>;
+}
+export declare function cssNameTransform({ path }: NameTransformProps): string;
+export {};

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

@@ -0,0 +1,21 @@
+/** Array of auth fields that we supply defaults with */
+export declare const signUpFieldsWithDefault: readonly ["birthdate", "email", "family_name", "given_name", "middle_name", "name", "nickname", "phone_number", "preferred_username", "profile", "website"];
+/** Auth fields that we supply defaults with */
+export declare type SignUpFieldsWithDefaults = typeof signUpFieldsWithDefault[number];
+/** Array of auth fields that we do not supply defaults with */
+export declare const signUpFieldsWithoutDefault: readonly ["address", "gender", "locale", "picture", "updated_at", "zoneinfo"];
+/** Auth fields that we do not supply defaults with */
+export declare type SignUpFieldsWithoutDefaults = typeof signUpFieldsWithoutDefault[number];
+/** All known auth fields */
+export declare type SignUpAttribute = SignUpFieldsWithDefaults | SignUpFieldsWithoutDefaults;
+/** Fields that are common in all routes */
+export declare type CommonFields = 'username' | 'password' | 'confirm_password';
+/** Array of known login mechanisms */
+export declare const LoginMechanismArray: readonly ["username", "email", "phone_number"];
+/** Login mechanisms that can be used to sign in */
+export declare type LoginMechanism = typeof LoginMechanismArray[number];
+/** List of social provider Authenticator supports */
+export declare type SocialProvider = 'amazon' | 'apple' | 'facebook' | 'google';
+export declare const authFieldsWithDefaults: readonly ["username", "email", "phone_number", "birthdate", "email", "family_name", "given_name", "middle_name", "name", "nickname", "phone_number", "preferred_username", "profile", "website", "confirmation_code", "password", "confirm_password"];
+/** Input fields that we provide default fields with */
+export declare type AuthFieldsWithDefaults = typeof authFieldsWithDefaults[number];

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

@@ -0,0 +1,61 @@
+import { AuthFieldsWithDefaults } from './attributes';
+/**
+ * Map of each input name to its value
+ */
+export declare type AuthFormData = Record<string, string>;
+/**
+ * List of routes that support custom formFields
+ */
+export declare type FormFieldComponents = 'signIn' | 'signUp' | 'forceNewPassword' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'resetPassword' | 'setupTOTP';
+/**
+ * Used to customize form field attributes for each authenticator screen.
+ */
+export declare type AuthFormFields = {
+    [key in FormFieldComponents]?: FormFields;
+};
+/**
+ * Override option for each screen. Maps each input to override options.
+ */
+export interface FormFields {
+    [field_name: string]: FormFieldOptions;
+}
+/**
+ * Override options for each field
+ */
+export interface FormFieldOptions {
+    /** Will hide the label above the input if set to true */
+    labelHidden?: boolean;
+    /** Label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /**
+     * @deprecated For internal use only, please use `isRequired` instead.
+     */
+    required?: boolean;
+    /** Whether this field is required for submission */
+    isRequired?: boolean;
+    /** Default dial code value */
+    dialCode?: string;
+    /** TOTP issuer to be used in the QR setup */
+    totpIssuer?: string;
+    /** TOTP username to be used in the QR */
+    totpUsername?: string;
+    /** List of dial codes you want to show in phone number field */
+    dialCodeList?: Array<string>;
+    /** Integer that denotes where this field should be positioned in. */
+    order?: number;
+    /** Desired HTML input type */
+    type?: string;
+    /** Desired autocomplete HTML attribute */
+    autocomplete?: string;
+}
+/** Default formField values for each supported auth field */
+export declare type DefaultFormFieldOptions = Record<AuthFieldsWithDefaults, FormFieldOptions>;
+/** Ordered list of formFields */
+export declare type FormFieldsArray = Array<[string, FormFieldOptions]>;
+export declare type PasswordPolicyRules = 'REQUIRES_LOWERCASE' | 'REQUIRES_NUMBERS' | 'REQUIRES_SYMBOLS' | 'REQUIRES_UPPERCASE';
+export interface PasswordSettings {
+    passwordPolicyMinLength: number;
+    passwordPolicyCharacters: Array<PasswordPolicyRules>;
+}

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

@@ -0,0 +1,5 @@
+export * from './validator';
+export * from './user';
+export * from './form';
+export * from './attributes';
+export * from './stateMachine';

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

@@ -0,0 +1,15 @@
+/**
+ * This files provides types that describe general shape of
+ * authenticator machine and its intepreter.
+ */
+import { Interpreter } from 'xstate';
+import { AuthContext } from './context';
+import { AuthEvent } from './event';
+/**
+ * Intefrace for `authMachine` machine interpreter
+ */
+export declare type AuthInterpreter = Interpreter<AuthContext, any, AuthEvent>;
+/**
+ * Function type for `send` in `authMachine`
+ */
+export declare type AuthMachineSend = AuthInterpreter['send'];

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

@@ -0,0 +1,101 @@
+import { ValidationError } from '../validator';
+import { AuthFormData, AuthFormFields } from '../form';
+import { AuthChallengeNames, CognitoUserAmplify } from '../user';
+import { CodeDeliveryDetails } from 'amazon-cognito-identity-js';
+import { LoginMechanism, SignUpAttribute, SocialProvider } from '../attributes';
+import { defaultServices } from '../../../machines/authenticator/defaultServices';
+import { PasswordSettings } from '..';
+/**
+ * Data that actor returns when they are done and reach the final state
+ */
+export interface ActorDoneData {
+    /** Any auth form values that needs to be persisted between the actors */
+    authAttributes?: AuthFormData;
+    /** String that indicates where authMachine should next transition to */
+    intent?: string;
+    /** User returned by the actor it's done */
+    user?: CognitoUserAmplify;
+}
+/**
+ * Context interface for the top-level machine
+ */
+export interface AuthContext {
+    /** Reference to the spawned actor */
+    actorRef?: any;
+    config?: {
+        loginMechanisms?: LoginMechanism[];
+        signUpAttributes?: SignUpAttribute[];
+        socialProviders?: SocialProvider[];
+        formFields?: AuthFormFields;
+        initialState?: 'signIn' | 'signUp' | 'resetPassword';
+        passwordSettings?: PasswordSettings;
+    };
+    services?: Partial<typeof defaultServices>;
+    user?: CognitoUserAmplify;
+    username?: string;
+    password?: string;
+    code?: string;
+    mfaType?: AuthChallengeNames.SMS_MFA | AuthChallengeNames.SOFTWARE_TOKEN_MFA;
+    actorDoneData?: Omit<ActorDoneData, 'user'>;
+}
+/**
+ * Base context for all actors that have auth forms associated
+ */
+interface BaseFormContext {
+    /** Any user attributes set that needs to persist between states */
+    authAttributes?: Record<string, any>;
+    /** Current challengeName issued by Cognnito */
+    challengeName?: string;
+    /** Required attributes for form submission */
+    requiredAttributes?: Array<string>;
+    /** Maps each input name to tis value */
+    formValues?: AuthFormData;
+    /** Input (names) that has been blurred at least ones */
+    touched?: AuthFormData;
+    /** String that indicates where authMachine should next transition to */
+    intent?: string;
+    /** Error returned from remote service / API */
+    remoteError?: string;
+    /** Current user inteface the actor is working with */
+    user?: CognitoUserAmplify;
+    /** Maps each input to its validation error, if any */
+    validationError?: ValidationError;
+    /** Maps each password validation rule */
+    passwordSettings?: PasswordSettings;
+    /** Denotes where a confirmation code has been sent to */
+    codeDeliveryDetails?: CodeDeliveryDetails;
+    /** Default country code for all phone number fields. */
+    country_code?: string;
+}
+export interface SignInContext extends BaseFormContext {
+    loginMechanisms: Required<AuthContext>['config']['loginMechanisms'];
+    socialProviders: Required<AuthContext>['config']['socialProviders'];
+    formFields?: AuthFormFields;
+    attributeToVerify?: string;
+    redirectIntent?: string;
+    unverifiedAttributes?: Record<string, string>;
+}
+export interface SignUpContext extends BaseFormContext {
+    loginMechanisms: Required<AuthContext>['config']['loginMechanisms'];
+    socialProviders: Required<AuthContext>['config']['socialProviders'];
+    formFields: AuthFormFields;
+    unverifiedAttributes?: Record<string, string>;
+}
+export interface ResetPasswordContext extends BaseFormContext {
+    username?: string;
+    unverifiedAttributes?: Record<string, string>;
+    formFields?: AuthFormFields;
+}
+export interface SignOutContext {
+    authAttributes?: Record<string, any>;
+    challengeName?: string;
+    unverifiedAttributes?: Record<string, string>;
+    user?: CognitoUserAmplify;
+    formFields?: AuthFormFields;
+}
+/**
+ * Context for actors that have forms
+ */
+export declare type ActorContextWithForms = SignInContext | SignUpContext | ResetPasswordContext;
+export declare type AuthActorContext = ActorContextWithForms | SignOutContext;
+export {};

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

@@ -0,0 +1,17 @@
+/**
+ * Events that occur when actors are done
+ */
+export declare type InvokeActorEventTypes = 'done.invoke.signInActor' | 'done.invoke.signUpActor' | 'done.invoke.signOutActor' | 'done.invoke.resetPasswordActor';
+/**
+ * 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' | InvokeActorEventTypes;
+/**
+ * Data payload for auth events
+ */
+export declare type AuthEventData = Record<PropertyKey, any>;
+/** Top-level auth machine event interface */
+export interface AuthEvent {
+    type: AuthEventTypes;
+    data?: AuthEventData;
+}

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

@@ -0,0 +1,4 @@
+export * from './context';
+export * from './event';
+export * from './authMachine';
+export * from './state';

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

@@ -0,0 +1,10 @@
+import { State } from 'xstate';
+import { ResetPasswordContext } from '.';
+import { SignInContext, SignUpContext, SignOutContext, AuthActorContext, AuthContext } from './context';
+import { AuthEvent } from './event';
+export declare type SignInState = State<SignInContext, AuthEvent>;
+export declare type SignUpState = State<SignUpContext, AuthEvent>;
+export declare type SignOutState = State<SignOutContext, AuthEvent>;
+export declare type ResetPasswordState = State<ResetPasswordContext, AuthEvent>;
+export declare type AuthActorState = State<AuthActorContext, AuthEvent>;
+export declare type AuthMachineState = State<AuthContext, AuthEvent>;

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

@@ -0,0 +1,29 @@
+import { CognitoUser } from 'amazon-cognito-identity-js';
+/** Enum of known challenge names */
+export declare enum AuthChallengeNames {
+    SMS_MFA = "SMS_MFA",
+    SOFTWARE_TOKEN_MFA = "SOFTWARE_TOKEN_MFA",
+    NEW_PASSWORD_REQUIRED = "NEW_PASSWORD_REQUIRED",
+    RESET_REQUIRED = "RESET_REQUIRED",
+    MFA_SETUP = "MFA_SETUP"
+}
+/** Contact destinations that we can send user confirmation code to */
+export declare type ContactMethod = 'Email' | 'Phone Number';
+/** Federated IDPs that Authenticator supports */
+export declare enum FederatedIdentityProviders {
+    Apple = "SignInWithApple",
+    Amazon = "LoginWithAmazon",
+    Facebook = "Facebook",
+    Google = "Google"
+}
+/** Known cognito user attributes */
+export interface CognitoAttributes {
+    email: string;
+    phone_number: string;
+    [key: string]: string;
+}
+/** Cognito User Interface */
+export interface CognitoUserAmplify extends CognitoUser {
+    username?: string;
+    attributes?: CognitoAttributes;
+}

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

@@ -0,0 +1,17 @@
+import { PasswordSettings } from '.';
+import { AuthFormData } from './form';
+import { AuthChallengeNames } from './user';
+/**
+ * Maps each input to its validation error, if any
+ */
+export declare type ValidationError = Record<string, string | string[]>;
+/**
+ * Return type of validator. This is `null` if there are no error, and `ValidationError` otherwise.
+ */
+export declare type ValidatorResult = void | null | ValidationError;
+export declare type SignInResult = string;
+/**
+ * Validates the given formData. This can be synchronous or asynchronous.
+ */
+export declare type Validator = (formData: AuthFormData, touchData?: AuthFormData, passwordSettings?: PasswordSettings) => ValidatorResult | Promise<ValidatorResult>;
+export declare type SignInTypes = (user: string, code: string, mfaType: AuthChallengeNames.SMS_MFA | AuthChallengeNames.SOFTWARE_TOKEN_MFA) => SignInResult | Promise<SignInResult>;

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

@@ -0,0 +1,2 @@
+export * from './authenticator';
+export * from './util';

package/dist/types/types/util.d.ts

@@ -0,0 +1 @@
+export declare type NoInfer<T> = [T][T extends any ? 0 : never];

package/dist/types/validators/index.d.ts

@@ -0,0 +1,2 @@
+import { AuthFormData, PasswordSettings, Validator } from '../types';
+export declare const runValidators: (formData: AuthFormData, touchData: AuthFormData, passwordSettings: PasswordSettings, validators: Validator[]) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -15,8 +15,13 @@
     "./styles.css": "./dist/styles.css",
     "./theme.css": "./dist/theme.css"
   },
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aws-amplify/amplify-ui",
+    "directory": "packages/ui"
+  },
   "files": [
     "dist",
     "LICENSE"
@@ -25,19 +30,20 @@
     "prebuild": "rimraf dist",
     "build": "yarn build:sd && yarn build:css && yarn build:js",
     "build:css": "./scripts/generateCSS.js",
-    "build:js": "tsup --minify",
+    "build:js": "rollup --config",
     "build:sd": "ts-node --transpile-only sd.config.ts",
     "clean": "rimraf dist node_modules",
-    "dev": "tsup --watch src",
+    "dev": "rollup --config --watch",
     "lint": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
     "lodash": "4.17.21",
     "style-dictionary": "3.0.3",
-    "xstate": "4.28.0"
+    "xstate": "^4.30.6"
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^8.3.1",
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.170",
     "@types/webpack-env": "^1.16.2",
@@ -48,6 +54,8 @@
     "jest": "^27.0.4",
     "postcss": "^8.3.6",
     "rimraf": "^3.0.2",
+    "rollup": "^2.70.0",
+    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.35.2",
     "ts-jest": "^27.0.3",
     "ts-node": "^10.2.1",
@@ -56,5 +64,8 @@
   },
   "peerDependencies": {
     "aws-amplify": "3.x.x || 4.x.x"
-  }
+  },
+  "sideEffects": [
+    "dist/**/*.css"
+  ]
 }