@aws-amplify/ui-react-core 2.1.32 → 3.0.0

package/dist/types/Authenticator/hooks/useAuthenticatorRoute/types.d.ts

@@ -1,4 +1,4 @@
-import { AuthenticatorMachineContext, AuthenticatorMachineContextKey, AuthenticatorRouteComponentName, CommonRouteProps, ConfirmResetPasswordBaseProps, ConfirmSignInBaseProps, ConfirmSignUpBaseProps, Defaults, DefaultProps, ForceResetPasswordBaseProps, ResetPasswordBaseProps, SetupTOTPBaseProps, SignInBaseProps, SignUpBaseProps, VerifyUserProps, ConfirmVerifyUserProps } from '../types';
+import { AuthenticatorMachineContext, AuthenticatorMachineContextKey, AuthenticatorRouteComponentName, CommonRouteProps, ConfirmResetPasswordBaseProps, ConfirmSignInBaseProps, ConfirmSignUpBaseProps, Defaults, DefaultProps, ForceResetPasswordBaseProps, ResetPasswordBaseProps, SetupTotpBaseProps, SignInBaseProps, SignUpBaseProps, VerifyUserProps, ConfirmVerifyUserProps } from '../types';
 export type UseAuthenticatorRouteParams<FieldType> = {
     components: Defaults<FieldType>;
 };
@@ -18,12 +18,12 @@ export type CommonRouteMachineKey = ExtractMachineKey<CommonRouteProps> | FormEv
  * `route` sub-component machine selector key types
  */
 export type ConfirmResetPasswordMachineKey = ExtractMachineKey<ConfirmResetPasswordBaseProps> | CommonRouteMachineKey;
-export type ConfirmSignInMachineKey = ExtractMachineKey<ConfirmSignInBaseProps> | CommonRouteMachineKey | 'user';
+export type ConfirmSignInMachineKey = ExtractMachineKey<ConfirmSignInBaseProps> | CommonRouteMachineKey;
 export type ConfirmSignUpMachineKey = ExtractMachineKey<ConfirmSignUpBaseProps> | CommonRouteMachineKey;
 export type ConfirmVerifyUserMachineKey = ExtractMachineKey<ConfirmVerifyUserProps> | CommonRouteMachineKey;
 export type ForceNewPasswordMachineKey = ExtractMachineKey<ForceResetPasswordBaseProps> | CommonRouteMachineKey;
 export type ResetPasswordMachineKey = ExtractMachineKey<ResetPasswordBaseProps> | CommonRouteMachineKey;
-export type SetupTOTPMachineKey = ExtractMachineKey<SetupTOTPBaseProps> | CommonRouteMachineKey;
+export type SetupTotpMachineKey = ExtractMachineKey<SetupTotpBaseProps> | CommonRouteMachineKey;
 export type SignInMachineKey = ExtractMachineKey<SignInBaseProps> | CommonRouteMachineKey;
 export type SignUpMachineKey = ExtractMachineKey<SignUpBaseProps> | CommonRouteMachineKey;
 export type VerifyUserMachineKey = ExtractMachineKey<VerifyUserProps> | CommonRouteMachineKey;

package/dist/types/Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.d.ts

@@ -4,8 +4,8 @@ export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticato
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'ConfirmSignUp'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'ConfirmVerifyUser'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'ForceNewPassword'>;
-export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'ResetPassword'>;
-export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SetupTOTP'>;
+export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'ForgotPassword'>;
+export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SetupTotp'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SignIn'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SignUp'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'VerifyUser'>;

package/dist/types/Authenticator/hooks/useAuthenticatorRoute/utils.d.ts

@@ -9,8 +9,8 @@ export declare function resolveConfirmSignInRoute<FieldType = {}>(Component: Def
 export declare function resolveConfirmSignUpRoute<FieldType = {}>(Component: Defaults<FieldType>['ConfirmSignUp'], props: UseAuthenticator): UseAuthenticatorRoute<'ConfirmSignUp', FieldType>;
 export declare function resolveConfirmVerifyUserRoute<FieldType = {}>(Component: Defaults<FieldType>['ConfirmVerifyUser'], props: UseAuthenticator): UseAuthenticatorRoute<'ConfirmVerifyUser', FieldType>;
 export declare function resolveForceNewPasswordRoute<FieldType = {}>(Component: Defaults<FieldType>['ForceNewPassword'], props: UseAuthenticator): UseAuthenticatorRoute<'ForceNewPassword', FieldType>;
-export declare function resolveResetPasswordRoute<FieldType = {}>(Component: Defaults<FieldType>['ResetPassword'], props: UseAuthenticator): UseAuthenticatorRoute<'ResetPassword', FieldType>;
-export declare function resolveSetupTOTPRoute<FieldType = {}>(Component: Defaults<FieldType>['SetupTOTP'], props: UseAuthenticator): UseAuthenticatorRoute<'SetupTOTP', FieldType>;
+export declare function resolveForgotPasswordRoute<FieldType = {}>(Component: Defaults<FieldType>['ForgotPassword'], props: UseAuthenticator): UseAuthenticatorRoute<'ForgotPassword', FieldType>;
+export declare function resolveSetupTotpRoute<FieldType = {}>(Component: Defaults<FieldType>['SetupTotp'], props: UseAuthenticator): UseAuthenticatorRoute<'SetupTotp', FieldType>;
 export declare function resolveSignInRoute<FieldType = {}>(Component: Defaults<FieldType>['SignIn'], props: UseAuthenticator): UseAuthenticatorRoute<'SignIn', FieldType>;
 export declare function resolveSignUpRoute<FieldType = {}>(Component: Defaults<FieldType>['SignUp'], props: UseAuthenticator): UseAuthenticatorRoute<'SignUp', FieldType>;
 export declare function resolveVerifyUserRoute<FieldType = {}>(Component: Defaults<FieldType>['VerifyUser'], props: UseAuthenticator): UseAuthenticatorRoute<'VerifyUser', FieldType>;

package/dist/types/components/FormCore/FormProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormValues, FormHandle, FormProviderProps } from './types';
+declare const FormProvider: React.ForwardRefExoticComponent<FormProviderProps<FormValues> & React.RefAttributes<FormHandle>>;
+export default FormProvider;

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

@@ -0,0 +1,5 @@
+export { FormProviderProps, FormValues, FormHandle, SubmitHandler, UseForm, Validate, Validator, } from './types';
+export { default as useField } from './useField';
+export { default as useForm } from './useForm';
+export { default as FormProvider } from './FormProvider';
+export { default as withFormProvider } from './withFormProvider';

package/dist/types/components/FormCore/types.d.ts

@@ -0,0 +1,217 @@
+import React from 'react';
+import { DefaultValues } from 'react-hook-form';
+export interface FormValues {
+    [k: string]: string;
+}
+export type FocusHandler = (event?: any) => void;
+export type ChangeHandler = (event?: any) => void;
+export type SubmitHandler<Values extends FormValues = FormValues> = (values: Values, event?: React.BaseSyntheticEvent) => void;
+type RefCallback = (node: any) => void;
+export interface SetFormValueParams<Name extends string = string> {
+    /**
+     * `Form` value `name`
+     */
+    name: Name;
+    /**
+     * `value` to be applied
+     */
+    value: string;
+    /**
+     * Whether validation should be ran
+     */
+    shouldValidate?: boolean;
+}
+type SetFormValue<Name extends string = string> = (params: SetFormValueParams<Name>) => void;
+/**
+ * `Field` validator callback
+ *
+ * @param value current `Field` value`
+ * @param values current `Form` values
+ * @returns `string` message on invalid `Field`, `undefined` on valid
+ */
+export type Validator<Values extends FormValues = FormValues> = (value: string, values: Values) => string | undefined;
+export type Validate<Values extends FormValues = FormValues> = Validator<Values> | Record<string, Validator<Values>>;
+export interface RegisterFieldParams<Values extends FormValues = FormValues> {
+    disabled?: boolean;
+    name: string;
+    onBlur?: FocusHandler;
+    onChange?: ChangeHandler;
+    validate?: Validate<Values>;
+    value?: string;
+}
+export interface UseFormParams<Values extends FormValues = FormValues, OnSubmit extends SubmitHandler<Values> = SubmitHandler<Values>> {
+    /**
+     * Custom error message provided to `Error` on call to `useForm` outside `FormProvider`
+     */
+    errorMessage?: string;
+    /**
+     * Submit event handler
+     */
+    onSubmit?: OnSubmit;
+}
+/**
+ * `Form` aware `Field` props to be provided to UI components
+ */
+interface RegisterProps<Name extends string = string> {
+    disabled?: boolean;
+    name: Name;
+    onBlur: FocusHandler;
+    onChange: ChangeHandler;
+    ref: RefCallback;
+}
+interface FieldState {
+    errorMessage: string | undefined;
+    hasError: boolean;
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+}
+export type UseForm<Values extends FormValues = FormValues> = {
+    /**
+     * Get `Field` state of `name`
+     */
+    getFieldState: (name: string) => FieldState;
+    /**
+     * Get current `Form` values
+     */
+    getValues: () => FormValues;
+    /**
+     * `Form` validity state
+     */
+    isValid: boolean;
+    /**
+     * Registers `name` to `Form` values, returns `Form` aware `Field` handlers and `ref`
+     */
+    registerField: (params: RegisterFieldParams) => RegisterProps;
+    /**
+     * Reset `Form` values
+     */
+    reset: (values: Values) => void;
+    /**
+     * Sets `Form` value of `name` param to provided `value`
+     */
+    setFormValue: SetFormValue;
+    /**
+     * `Form` submit callback prop
+     *
+     * @usage
+     * ```tsx
+     * const { onSubmit } = useForm();
+     *
+     * <form onSubmit={onSubmit} />
+     * ```
+     */
+    onSubmit: (e?: React.BaseSyntheticEvent) => void;
+};
+export type FormHandle<Values extends FormValues = FormValues> = {
+    /**
+     * Get current `Form` values
+     */
+    getValues: () => Values;
+    /**
+     * Reset `Form` values to default values
+     */
+    reset: () => void;
+};
+type ValidationMode = 'onBlur' | 'onChange' | 'onSubmit' | 'onTouched' | 'all';
+export interface FormProviderProps<Values extends FormValues = FormValues> {
+    /**
+     * `Form` children
+     */
+    children?: React.ReactNode;
+    /**
+     * `Form` default values
+     */
+    defaultValues?: DefaultValues<Values>;
+    /**
+     * Validation mode applied to `Field` components:
+     *
+     * - `onTouched`: Validate on first blur event and every subsequent change event
+     * - `onBlur`: validate on blur events only
+     * - `onChange`: validate on change events, non-performant
+     * - `all`: validate on blur and change events
+     *
+     * @default
+     * "onTouched"
+     */
+    mode?: ValidationMode;
+}
+/**
+ * For use with React only.
+ */
+export interface UseField<Name extends string = string> extends FieldState, RegisterProps {
+    name: Name;
+}
+/**
+ * For use with React only.
+ */
+export interface UseFieldParams<OnBlur extends FocusHandler | undefined, OnChange extends ChangeHandler | undefined, Values extends FormValues = FormValues> {
+    /**
+     * Controlled `disabled` state
+     */
+    disabled?: boolean;
+    /**
+     * Controlled blur event handler
+     */
+    onBlur?: OnBlur;
+    /**
+     * Controlled change event handler
+     */
+    onChange?: OnChange;
+    /**
+     * `Field` name, must be unique
+     */
+    name: string;
+    /**
+     * `Field` validation handler. Accepts a callback function or an
+     * object of callback functions to validate against
+     *
+     * @usage
+     * ```tsx
+     *
+     * // validate `password` and `confim_pasword` values match
+     * const validate = (value: string, values: Values) =>
+     *   value === values['confirm_password']
+     *     ? undefined
+     *     : 'Passwords must match!';
+     *
+     *
+     * const passwordProps = useField({ name: 'password' });
+     *
+     * const confirmPasswordProps = useField({
+     *   name: 'confirm_password',
+     *   validate
+     * });
+     *
+     * return (
+     *   <>
+     *     <TextField {...passwordProps} />
+     *     <TextField {...confirmPasswordProps} />
+     *   </>
+     * )
+     * ```
+     */
+    validate?: Validate<Values>;
+}
+/**
+ * For use with React Native only.
+ */
+export interface UseControlledFieldParams<OnBlur extends FocusHandler | undefined, Values extends FormValues = FormValues> extends Omit<UseFieldParams<OnBlur, undefined, Values>, 'onChange'> {
+    /**
+     * Controlled text change event handler
+     */
+    onChangeText?: (value: string) => void;
+}
+/**
+ * For use with React Native only.
+ */
+export interface UseControlledField<Name extends string = string> extends Omit<UseField<Name>, 'onChange'> {
+    name: Name;
+    /**
+     * React Native only.
+     * Controlled text change event handler
+     */
+    onChangeText: (value: string) => void;
+    value: string;
+}
+export {};

package/dist/types/components/FormCore/useControlledField.d.ts

@@ -0,0 +1,9 @@
+import { FocusHandler, UseControlledField, UseControlledFieldParams } from './types';
+export declare const DEFAULT_ERROR_MESSAGE = "`useControlledField` must be used within a `FormProvider`";
+/**
+ * `Field` integration hook for usage with React Native `Field` components
+ *
+ * @param params Requires `name`, all additional params optional
+ * @returns `Form` aware `Field` handlers and state values
+ */
+export default function useControlledField<OnBlur extends FocusHandler>({ onBlur: _onBlur, onChangeText: _onChangeText, ...rest }: UseControlledFieldParams<OnBlur>): UseControlledField;

package/dist/types/components/FormCore/useField.d.ts

@@ -0,0 +1,9 @@
+import { ChangeHandler, FocusHandler, UseField, UseFieldParams } from './types';
+export declare const DEFAULT_ERROR_MESSAGE = "`useField` must be used within a `FormProvider`";
+/**
+ * `Field` integration hook for usage with React `Field` components.
+ *
+ * @param params Requires `name`, all additional params optional
+ * @returns `Form` aware `Field` event handlers and state values
+ */
+export default function useField<OnBlur extends FocusHandler, OnChange extends ChangeHandler>(params: UseFieldParams<OnBlur, OnChange>): UseField;

package/dist/types/components/FormCore/useForm.d.ts

@@ -0,0 +1,12 @@
+import { FormValues, SubmitHandler, UseForm, UseFormParams } from './types';
+export declare const DEFAULT_ERROR_MESSAGE = "`useForm` must be called inside a `FormProvider`";
+/**
+ * Utility hook corresponding to `FormProvider`, must be used within a `FormProvider`
+ *
+ * @internal Extend for public export. `useForm` and `UseForm` are an abstraction layer
+ * on top of `useFormContext` and `UseFormReturn`, imported from `react-hook-form`
+ *
+ * @param options optional parameters
+ * @returns `Form` utilities
+ */
+export default function useForm<Values extends FormValues = FormValues, OnSubmit extends SubmitHandler = SubmitHandler>(options?: UseFormParams<Values, OnSubmit>): UseForm<Values>;

package/dist/types/components/FormCore/withFormProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AnyComponent, MergeProps } from '../../types';
+import { FormHandle, FormProviderProps } from './types';
+/**
+ * @param Child `Form` base component wrapped inside `FormProvider`
+ * @returns Composed `Form` component exposing `FormContext` values to descendents
+ */
+export default function withFormProvider<ChildComp extends AnyComponent, ChildProps extends React.ComponentPropsWithRef<ChildComp>, Props extends MergeProps<FormProviderProps, ChildProps>>(Child: ChildComp): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<FormHandle>>;

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

@@ -1 +1,2 @@
+export { FormProvider, FormProviderProps, FormValues, FormHandle, SubmitHandler, useField, useForm, UseForm, Validate, Validator, withFormProvider, } from './FormCore';
 export { RenderNothing } from './RenderNothing';

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

@@ -1,3 +1,5 @@
 export { default as useDeprecationWarning, UseDeprecationWarning, } from './useDeprecationWarning';
 export { default as useHasValueUpdated } from './useHasValueUpdated';
 export { default as usePreviousValue } from './usePreviousValue';
+export { default as useSetUserAgent } from './useSetUserAgent';
+export { default as useTimeout } from './useTimeout';

package/dist/types/hooks/useSetUserAgent.d.ts

@@ -0,0 +1,2 @@
+import { SetUserAgentOptions } from '@aws-amplify/ui';
+export default function useSetUserAgent({ componentName, packageName, version, }: SetUserAgentOptions): void;

package/dist/types/hooks/useTimeout.d.ts

@@ -0,0 +1,4 @@
+export default function useTimeout({ callback, delay, }: {
+    callback?: () => void;
+    delay?: number;
+}): void;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export { AuthenticatorComponentDefaults, AuthenticatorComponentDefaultProps, AuthenticatorComponentOverrides, AuthenticatorFooterComponent, AuthenticatorFormFieldsComponent, AuthenticatorHeaderComponent, AuthenticatorLegacyField, AuthenticatorMachineContext, AuthenticatorProvider, AuthenticatorRouteComponentKey, AuthenticatorRouteComponentName, isAuthenticatorComponentRouteKey, resolveAuthenticatorComponents, useAuthenticator, useAuthenticatorRoute, UseAuthenticator, useAuthenticatorInitMachine, UseAuthenticatorRoute, } from './Authenticator';
-export { RenderNothing } from './components';
-export { useDeprecationWarning, UseDeprecationWarning, useHasValueUpdated, usePreviousValue, } from './hooks';
+export { FormProvider, FormProviderProps, RenderNothing, FormValues, FormHandle, useField, useForm, UseForm, Validate, Validator, withFormProvider, } from './components';
+export { useDeprecationWarning, UseDeprecationWarning, useHasValueUpdated, usePreviousValue, useSetUserAgent, useTimeout, } from './hooks';
 export { MergeProps } from './types';
+export { createContextUtilities } from './utils';

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

@@ -1 +1 @@
-export { MergeProps } from './types';
+export { AnyComponent, MergeProps } from './types';

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

@@ -1 +1,3 @@
+/// <reference types="react" />
+export type AnyComponent = React.ComponentType<any>;
 export type MergeProps<C, P> = C & Omit<P, keyof C>;

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

@@ -1,34 +1,40 @@
 import React from 'react';
 export declare const INVALID_OPTIONS_MESSAGE = "an `errorMessage` or a `defaultValue` must be provided in `options`";
-type ContextOptions<ContextType, ContextName extends string> = {
-    contextName: ContextName;
-} & (// exclude `errorMessage` if `defaultValue` is present
-{
+interface OptionsWithDefaultValue<Name, ContextType> {
+    contextName: Name;
     defaultValue: ContextType;
     errorMessage?: never;
-} | {
-    errorMessage: string;
+}
+interface OptionsWithErrorMessage<Name, ErrorMessage> {
+    contextName: Name;
+    errorMessage: ErrorMessage;
     defaultValue?: never;
-});
+}
+type ContextOptions<Type, Name extends string, Message> = OptionsWithDefaultValue<Name, Type> | OptionsWithErrorMessage<Name, Message>;
+type HookParams = {
+    errorMessage?: string;
+};
 type UtilityKey<ContextName extends string> = `${ContextName}Provider` | `use${ContextName}` | `${ContextName}Context`;
 type CreateContextUtilitiesReturn<ContextType, ContextName extends string> = {
-    [Key in UtilityKey<ContextName>]: Key extends `${string}Provider` ? React.ComponentType<React.PropsWithChildren<Partial<ContextType>>> : Key extends `use${string}` ? () => ContextType : Key extends `${string}Context` ? React.Context<ContextType | undefined> : never;
+    [Key in UtilityKey<ContextName>]: Key extends `${string}Provider` ? React.ComponentType<React.PropsWithChildren<ContextType>> : Key extends `use${string}` ? (params?: HookParams) => ContextType : Key extends `${string}Context` ? React.Context<ContextType | undefined> : never;
 };
 /**
- * Use a `ContextType` generic and `options` to create:
- * - `Context`: React Context of type `ContextType`
- * - `Provider`: React Context `Provider` component exposing the `ContextType`
+ * Uses `ContextType`/`Name` generics and `options` to create:
+ * - `${Name}Context`: React Context of type `ContextType`
+ * - `Provider${Name}`: React Context `Provider` component exposing the `ContextType`
  *   as optional props
- * - `useContext`: Utility Hook exposing the values of `ContextType`
+ * - `use${Name}`: Utility Hook exposing the values of `ContextType`. Allows
+ *   params with `errorMessage` for granular error messaging
  *
  * @template ContextType Type definition of the Context.
  * > For most use cases the keys of `ContextType` should not be optional in
  * preference of explicit `undefined` to avoid optional types on the
  * Utility Hook return
  *
- * @param options Context utility options. Requires a `contextName`, and either
- * a `defaultValue` of `ContextType` or `errorMessage` allowing for differing
- * behaviors of the Utility Hook when used outside a parent `Provider`:
+ * @param options Context utility options. Requires a `contextName`, and
+ * either a `defaultValue` of `ContextType` **or** an `errorMessage`
+ * allowing for differing behaviors of the Utility Hook when used outside a
+ * parent `Provider`:
  *
  * - `defaultValue`: Ensures the Utility Hook returns a default value for
  *   scenarios **where the missing context values should not impact usage**
@@ -44,9 +50,11 @@ type CreateContextUtilitiesReturn<ContextType, ContextName extends string> = {
  * }
  *
  * // with `defaultValue`
- * const { StuffProvider, useStuff } = createContextUtilities<StuffContextType>({
+ * const defaultValue: StuffContextType = { things: 7 };
+ *
+ * const { StuffProvider, useStuff } = createContextUtilities({
  *   contextName: 'Stuff',
- *   defaultValue: { things: 7 }
+ *   defaultValue,
  * });
  *
  * // with `errorMessage`
@@ -56,5 +64,5 @@ type CreateContextUtilitiesReturn<ContextType, ContextName extends string> = {
  * });
  * ```
  */
-export default function createContextUtilities<ContextType, ContextName extends string = string>(options: ContextOptions<ContextType, ContextName>): CreateContextUtilitiesReturn<ContextType, ContextName>;
+export default function createContextUtilities<ContextType, ContextName extends string = string, Message extends string | undefined = string | undefined>(options: ContextOptions<ContextType, ContextName, Message>): CreateContextUtilitiesReturn<ContextType, ContextName>;
 export {};

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "2.1.32",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
-  "react-native": "dist/index.js",
+  "react-native": "src/index.ts",
   "exports": {
     ".": {
       "import": "./dist/esm/index.mjs",
@@ -16,7 +16,10 @@
   "license": "Apache-2.0",
   "files": [
     "dist",
-    "LICENSE"
+    "LICENSE",
+    "src",
+    "!**/__mocks__",
+    "!**/__tests__"
   ],
   "scripts": {
     "clean": "rimraf dist node_modules",
@@ -26,40 +29,19 @@
     "lint": "yarn typecheck && eslint src",
     "prebuild": "rimraf dist",
     "test": "jest",
-    "test:ci": "yarn test && yarn check:esm",
     "test:watch": "yarn test --watch",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
-    "@xstate/react": "3.0.1",
+    "@aws-amplify/ui": "6.0.0",
+    "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
+    "react-hook-form": "^7.43.5",
     "xstate": "^4.33.6"
   },
   "peerDependencies": {
-    "aws-amplify": "^5.0.1",
-    "react": ">= 16.14.0"
-  },
-  "devDependencies": {
-    "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
-    "@rollup/plugin-typescript": "^8.3.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.13",
-    "@types/react-test-renderer": "^17.0.1",
-    "eslint": "^8.44.0",
-    "jest": "^27.0.4",
-    "prettier": "2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.70.0",
-    "rollup-plugin-node-externals": "^4.1.1",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.3.2"
+    "aws-amplify": "^6.0.2",
+    "react": "^16.14.0 || ^17.0 || ^18.0"
   },
   "sideEffects": false
 }

package/src/Authenticator/context/AuthenticatorContext.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { AuthInterpreter, AuthStatus } from '@aws-amplify/ui';
+
+/**
+ * Authenticator React.Context type
+ */
+type AuthenticatorContextType = { service: AuthInterpreter };
+
+/**
+ * AuthenticatorContext serves static reference to the auth machine service.
+ *
+ * https://xstate.js.org/docs/recipes/react.html#context-provider
+ */
+export const AuthenticatorContext = React.createContext<
+  (AuthenticatorContextType & { authStatus: AuthStatus }) | null
+>(null);

package/src/Authenticator/context/AuthenticatorProvider.tsx

@@ -0,0 +1,82 @@
+import React, { ReactNode, useContext, useEffect, useMemo } from 'react';
+import { useInterpret } from '@xstate/react';
+
+import { getCurrentUser } from 'aws-amplify/auth';
+import {
+  AuthStatus,
+  AuthMachineHubHandler,
+  createAuthenticatorMachine,
+  defaultAuthHubHandler,
+  listenToAuthHub,
+} from '@aws-amplify/ui';
+
+import { AuthenticatorContext } from './AuthenticatorContext';
+
+type Options = Parameters<AuthMachineHubHandler>[2];
+
+const createHubHandler =
+  (options: Options): AuthMachineHubHandler =>
+  async (data, service) => {
+    await defaultAuthHubHandler(data, service, options);
+  };
+
+export default function AuthenticatorProvider({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  // `authStatus` is exposed by `useAuthenticator` but should not be derived directly from the
+  // state machine as the machine only updates on `Authenticator` initiated events, which
+  // leads to scenarios where the state machine `authStatus` gets "stuck". For exmample,
+  // if a user was to sign in using `Auth.signIn` directly rather than using `Authenticator`
+  const [authStatus, setAuthStatus] = React.useState<AuthStatus>('configuring');
+
+  // only run on first render
+  React.useEffect(() => {
+    getCurrentUser()
+      .then(() => {
+        setAuthStatus('authenticated');
+      })
+      .catch(() => {
+        setAuthStatus('unauthenticated');
+      });
+  }, []);
+
+  /**
+   * Based on use cases, developer might already have added another Provider
+   * outside Authenticator. In that case, we sync the two providers by just
+   * passing the parent value.
+   *
+   * TODO(BREAKING): enforce only one provider in App tree
+   */
+  const parentProviderVal = useContext(AuthenticatorContext);
+  const service = useInterpret(createAuthenticatorMachine);
+
+  const value = useMemo(
+    () => (!parentProviderVal ? { authStatus, service } : parentProviderVal),
+    [authStatus, parentProviderVal, service]
+  );
+
+  const { service: activeService } = value;
+
+  useEffect(() => {
+    const onSignIn = () => {
+      setAuthStatus('authenticated');
+    };
+    const onSignOut = () => {
+      setAuthStatus('unauthenticated');
+    };
+
+    const unsubscribe = listenToAuthHub(
+      activeService,
+      createHubHandler({ onSignIn, onSignOut })
+    );
+    return unsubscribe;
+  }, [activeService]);
+
+  return (
+    <AuthenticatorContext.Provider value={value}>
+      {children}
+    </AuthenticatorContext.Provider>
+  );
+}

package/src/Authenticator/context/index.ts

@@ -0,0 +1,2 @@
+export { default as AuthenticatorProvider } from './AuthenticatorProvider';
+export { AuthenticatorContext } from './AuthenticatorContext';

package/src/Authenticator/hooks/constants.ts

@@ -0,0 +1,30 @@
+import {
+  AuthenticatorRouteComponentKey,
+  AuthenticatorRouteComponentName,
+} from './types';
+
+export const COMPONENT_ROUTE_KEYS: AuthenticatorRouteComponentKey[] = [
+  'confirmResetPassword',
+  'confirmSignIn',
+  'confirmSignUp',
+  'confirmVerifyUser',
+  'forceNewPassword',
+  'forgotPassword',
+  'setupTotp',
+  'signIn',
+  'signUp',
+  'verifyUser',
+];
+
+export const COMPONENT_ROUTE_NAMES: AuthenticatorRouteComponentName[] = [
+  'ConfirmResetPassword',
+  'ConfirmSignIn',
+  'ConfirmSignUp',
+  'ConfirmVerifyUser',
+  'ForceNewPassword',
+  'ForgotPassword',
+  'SetupTotp',
+  'SignIn',
+  'SignUp',
+  'VerifyUser',
+];

package/src/Authenticator/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useAuthenticator';
+export * from './useAuthenticatorRoute';
+export * from './useAuthenticatorInitMachine';
+export * from './utils';
+export * from './types';