@aws-amplify/ui-react-core 2.0.0 → 2.1.0

package/dist/esm/Authenticator/hooks/constants.js

@@ -0,0 +1,26 @@
+const COMPONENT_ROUTE_KEYS = [
+    'confirmResetPassword',
+    'confirmSignIn',
+    'confirmSignUp',
+    'confirmVerifyUser',
+    'forceNewPassword',
+    'resetPassword',
+    'setupTOTP',
+    'signIn',
+    'signUp',
+    'verifyUser',
+];
+const COMPONENT_ROUTE_NAMES = [
+    'ConfirmResetPassword',
+    'ConfirmSignIn',
+    'ConfirmSignUp',
+    'ConfirmVerifyUser',
+    'ForceNewPassword',
+    'ResetPassword',
+    'SetupTOTP',
+    'SignIn',
+    'SignUp',
+    'VerifyUser',
+];
+
+export { COMPONENT_ROUTE_KEYS, COMPONENT_ROUTE_NAMES };

package/dist/esm/Authenticator/hooks/useAuthenticator/constants.js

@@ -1,15 +1,3 @@
 const USE_AUTHENTICATOR_ERROR = '`useAuthenticator` must be used inside an `Authenticator.Provider`.';
-const COMPONENT_ROUTE_KEYS = [
-    'signIn',
-    'signUp',
-    'forceNewPassword',
-    'confirmResetPassword',
-    'confirmSignIn',
-    'confirmSignUp',
-    'confirmVerifyUser',
-    'resetPassword',
-    'setupTOTP',
-    'verifyUser',
-];
 
-export { COMPONENT_ROUTE_KEYS, USE_AUTHENTICATOR_ERROR };
+export { USE_AUTHENTICATOR_ERROR };

package/dist/esm/Authenticator/hooks/useAuthenticator/useAuthenticator.js

@@ -5,7 +5,7 @@ import { getServiceFacade } from '@aws-amplify/ui';
 import 'react/jsx-runtime';
 import { AuthenticatorContext } from '../../context/AuthenticatorContext.js';
 import { USE_AUTHENTICATOR_ERROR } from './constants.js';
-import { getLegacyFields, getTotpSecretCodeCallback, getComparator, defaultComparator } from './utils.js';
+import { getMachineFields, getTotpSecretCodeCallback, getComparator, defaultComparator } from './utils.js';
 
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#useauthenticator-hook)
@@ -20,13 +20,14 @@ function useAuthenticator(selector) {
     const xstateSelector = useCallback((state) => (Object.assign({}, getServiceFacade({ send, state }))), [send]);
     const comparator = selector ? getComparator(selector) : defaultComparator;
     const facade = useSelector(service, xstateSelector, comparator);
-    const { route, user } = facade, rest = __rest(facade, ["route", "user"]);
+    const { route, unverifiedContactMethods, user } = facade, rest = __rest(facade, ["route", "unverifiedContactMethods", "user"]);
     // do not memoize output. `service.getSnapshot` reference remains stable preventing
     // `fields` from updating with current form state on value changes
     const serviceSnapshot = service.getSnapshot();
     // legacy `formFields` values required until form state is removed from state machine
-    const fields = useMemo(() => getLegacyFields(route, serviceSnapshot), [route, serviceSnapshot]);
+    const fields = useMemo(() => getMachineFields(route, serviceSnapshot, unverifiedContactMethods), [route, serviceSnapshot, unverifiedContactMethods]);
     return Object.assign(Object.assign({}, rest), { getTotpSecretCode: getTotpSecretCodeCallback(user), route,
+        unverifiedContactMethods,
         user,
         /** @deprecated For internal use only */
         fields });

package/dist/esm/Authenticator/hooks/useAuthenticator/utils.js

@@ -1,8 +1,9 @@
 import { __awaiter } from '../../../node_modules/tslib/tslib.es6.js';
 import { Auth } from 'aws-amplify';
 import { getSortedFormFields } from '@aws-amplify/ui';
+import isString from 'lodash/isString';
 import { areEmptyArrays, areEmptyObjects } from '../../../utils/index.js';
-import { COMPONENT_ROUTE_KEYS } from './constants.js';
+import { isComponentRouteKey } from '../utils.js';
 
 const defaultComparator = () => false;
 /**
@@ -33,15 +34,28 @@ const getTotpSecretCodeCallback = (user) => function getTotpSecretCode() {
         return yield Auth.setupTOTP(user);
     });
 };
-const isComponentRouteKey = (route) => COMPONENT_ROUTE_KEYS.some((componentRoute) => componentRoute === route);
 const flattenFormFields = (fields) => fields.flatMap(([name, options]) => (Object.assign({ name }, options)));
+const convertContactMethodsToFields = (unverifiedContactMethods) => {
+    return (unverifiedContactMethods &&
+        Object.entries(unverifiedContactMethods).map(([name, value]) => {
+            const valueIsString = isString(value);
+            if (!valueIsString || !name) {
+                return {};
+            }
+            return { name, label: value, type: 'radio', value };
+        }));
+};
 /**
- * Retrieves legacy form field values from state machine for routes that have fields
+ * Retrieves default and custom (RWA only, to be updated) form field values from state machine
+ * for subcomponent routes that render fields
  */
-const getLegacyFields = (route, state) => 
-// verifyUser is a component route, but does not have form fields
-isComponentRouteKey(route) && route !== 'verifyUser'
-    ? flattenFormFields(getSortedFormFields(route, state))
-    : [];
+const getMachineFields = (route, state, unverifiedContactMethods) => {
+    if (isComponentRouteKey(route)) {
+        return route === 'verifyUser'
+            ? convertContactMethodsToFields(unverifiedContactMethods)
+            : flattenFormFields(getSortedFormFields(route, state));
+    }
+    return [];
+};
 
-export { areSelectorDepsEqual, defaultComparator, getComparator, getLegacyFields, getTotpSecretCodeCallback, isComponentRouteKey };
+export { areSelectorDepsEqual, defaultComparator, getComparator, getMachineFields, getTotpSecretCodeCallback };

package/dist/esm/Authenticator/hooks/useAuthenticatorInitMachine/useAuthenticatorInitMachine.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import useAuthenticator from '../useAuthenticator/useAuthenticator.js';
+
+// only select `route` from machine context
+const routeSelector = ({ route }) => [route];
+function useAuthenticatorInitMachine(data) {
+    const { route, initializeMachine } = useAuthenticator(routeSelector);
+    const hasInitialized = React.useRef(false);
+    React.useEffect(() => {
+        if (!hasInitialized.current && route === 'setup') {
+            initializeMachine(data);
+            hasInitialized.current = true;
+        }
+    }, [initializeMachine, route, data]);
+}
+
+export { useAuthenticatorInitMachine as default, routeSelector };

package/dist/esm/Authenticator/hooks/useAuthenticatorRoute/constants.js

@@ -0,0 +1,73 @@
+const EVENT_HANDLER_KEY_MAP = {
+    updateBlur: 'handleBlur',
+    updateForm: 'handleChange',
+    submitForm: 'handleSubmit',
+};
+const COMMON_ROUTE_MACHINE_KEYS = [
+    'error',
+    'isPending',
+    'submitForm',
+    'updateBlur',
+    'updateForm',
+];
+const CONFIRM_RESET_PASSWORD_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'resendCode',
+    'validationErrors',
+];
+const CONFIRM_SIGN_IN_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toSignIn',
+    'user',
+];
+const CONFIRM_SIGN_UP_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'codeDeliveryDetails',
+    'resendCode',
+];
+const CONFIRM_VERIFY_USER_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'skipVerification',
+];
+const FORCE_NEW_PASSWORD_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toSignIn',
+    'validationErrors',
+];
+const RESET_PASSWORD_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toSignIn',
+];
+const SIGN_IN_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toFederatedSignIn',
+    'toResetPassword',
+    'toSignUp',
+];
+const SIGN_UP_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toSignIn',
+    'validationErrors',
+];
+const SETUP_TOTP_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toSignIn',
+];
+const VERIFY_USER_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'skipVerification',
+];
+const MACHINE_PROP_KEYS = {
+    confirmResetPassword: CONFIRM_RESET_PASSWORD_MACHINE_KEYS,
+    confirmSignIn: CONFIRM_SIGN_IN_MACHINE_KEYS,
+    confirmSignUp: CONFIRM_SIGN_UP_MACHINE_KEYS,
+    confirmVerifyUser: CONFIRM_VERIFY_USER_MACHINE_KEYS,
+    forceNewPassword: FORCE_NEW_PASSWORD_MACHINE_KEYS,
+    signIn: SIGN_IN_MACHINE_KEYS,
+    signUp: SIGN_UP_MACHINE_KEYS,
+    resetPassword: RESET_PASSWORD_MACHINE_KEYS,
+    setupTOTP: SETUP_TOTP_MACHINE_KEYS,
+    verifyUser: VERIFY_USER_MACHINE_KEYS,
+};
+
+export { EVENT_HANDLER_KEY_MAP, MACHINE_PROP_KEYS };

package/dist/esm/Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.js

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import useAuthenticator from '../useAuthenticator/useAuthenticator.js';
+import { getRouteMachineSelector, resolveDefault, resolveVerifyUserRoute, resolveSignUpRoute, resolveSignInRoute, resolveSetupTOTPRoute, resolveResetPasswordRoute, resolveForceNewPasswordRoute, resolveConfirmVerifyUserRoute, resolveConfirmSignUpRoute, resolveConfirmSignInRoute, resolveConfirmResetPasswordRoute, routeSelector } from './utils.js';
+
+function useAuthenticatorRoute({ components, }) {
+    const { route } = useAuthenticator(routeSelector);
+    const routeMachineSelector = useMemo(() => getRouteMachineSelector(route), [route]);
+    // `useAuthenticator` exposes both state machine (example: `toSignIn`) and non-state machine
+    // props (example: `getTotpSecretCode`). `routeSelector` specifies which state machine props
+    // should be returned for a specific route.
+    // Only state machine props specified by the current `routeSelector` will have their current value
+    // returned by `useAuthenticator`, non-machine props returned will always be the current value
+    const routeSelectorProps = useAuthenticator(routeMachineSelector);
+    const { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ResetPassword, SetupTOTP, SignIn, SignUp, VerifyUser, } = components;
+    switch (route) {
+        case 'confirmResetPassword': {
+            return resolveConfirmResetPasswordRoute(ConfirmResetPassword, routeSelectorProps);
+        }
+        case 'confirmSignIn': {
+            return resolveConfirmSignInRoute(ConfirmSignIn, routeSelectorProps);
+        }
+        case 'confirmSignUp': {
+            return resolveConfirmSignUpRoute(ConfirmSignUp, routeSelectorProps);
+        }
+        case 'confirmVerifyUser': {
+            return resolveConfirmVerifyUserRoute(ConfirmVerifyUser, routeSelectorProps);
+        }
+        case 'forceNewPassword': {
+            return resolveForceNewPasswordRoute(ForceNewPassword, routeSelectorProps);
+        }
+        case 'resetPassword': {
+            return resolveResetPasswordRoute(ResetPassword, routeSelectorProps);
+        }
+        case 'setupTOTP': {
+            return resolveSetupTOTPRoute(SetupTOTP, routeSelectorProps);
+        }
+        case 'signIn': {
+            return resolveSignInRoute(SignIn, routeSelectorProps);
+        }
+        case 'signUp': {
+            return resolveSignUpRoute(SignUp, routeSelectorProps);
+        }
+        case 'verifyUser': {
+            return resolveVerifyUserRoute(VerifyUser, routeSelectorProps);
+        }
+        default: {
+            return resolveDefault();
+        }
+    }
+}
+
+export { useAuthenticatorRoute as default };

package/dist/esm/Authenticator/hooks/useAuthenticatorRoute/utils.js

@@ -0,0 +1,89 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import RenderNothing from '../../../components/RenderNothing/RenderNothing.js';
+import { isComponentRouteKey } from '../utils.js';
+import { MACHINE_PROP_KEYS, EVENT_HANDLER_KEY_MAP } from './constants.js';
+
+// only select `route` from machine context
+const routeSelector = ({ route }) => [route];
+const createSelector = (selectorKeys) => (context) => {
+    const dependencies = selectorKeys.map((key) => context[key]);
+    // route should always be part of deps, so hook knows when route changes.
+    return [...dependencies, context.route];
+};
+const getRouteMachineSelector = (route) => isComponentRouteKey(route)
+    ? createSelector(MACHINE_PROP_KEYS[route])
+    : routeSelector;
+const isFormEventHandlerKey = (key) => ['updateBlur', 'updateForm', 'submitForm'].includes(key);
+const convertEventHandlerKey = (key) => EVENT_HANDLER_KEY_MAP[key];
+const getConvertedMachineProps = (route, context) => MACHINE_PROP_KEYS[route].reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [isFormEventHandlerKey(key) ? convertEventHandlerKey(key) : key]: context[key] })), {});
+function resolveConfirmResetPasswordRoute(Component, props) {
+    return {
+        Component,
+        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('confirmResetPassword', props)),
+    };
+}
+function resolveConfirmSignInRoute(Component, props) {
+    const _a = getConvertedMachineProps('confirmSignIn', props), { user } = _a, machineProps = __rest(_a, ["user"]);
+    // prior to the `confirmSignIn` route, `user.username` is populated
+    const challengeName = user.challengeName;
+    return { Component, props: Object.assign(Object.assign(Object.assign({}, Component), machineProps), { challengeName }) };
+}
+function resolveConfirmSignUpRoute(Component, props) {
+    return {
+        Component,
+        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('confirmSignUp', props)),
+    };
+}
+function resolveConfirmVerifyUserRoute(Component, props) {
+    return {
+        Component,
+        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('confirmVerifyUser', props)),
+    };
+}
+function resolveForceNewPasswordRoute(Component, props) {
+    return {
+        Component,
+        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('forceNewPassword', props)),
+    };
+}
+function resolveResetPasswordRoute(Component, props) {
+    return {
+        Component,
+        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('resetPassword', props)),
+    };
+}
+function resolveSetupTOTPRoute(Component, _a) {
+    var { getTotpSecretCode } = _a, props = __rest(_a, ["getTotpSecretCode"]);
+    return {
+        Component,
+        props: Object.assign(Object.assign(Object.assign({}, Component), getConvertedMachineProps('setupTOTP', props)), { getTotpSecretCode }),
+    };
+}
+function resolveSignInRoute(Component, props) {
+    // default `hideSignUp` to false
+    const hideSignUp = false;
+    return {
+        Component,
+        props: Object.assign(Object.assign(Object.assign({}, Component), getConvertedMachineProps('signIn', props)), { hideSignUp }),
+    };
+}
+function resolveSignUpRoute(Component, props) {
+    return {
+        Component,
+        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('signUp', props)),
+    };
+}
+function resolveVerifyUserRoute(Component, props) {
+    return {
+        Component,
+        props: Object.assign(Object.assign({}, Component), getConvertedMachineProps('verifyUser', props)),
+    };
+}
+function resolveDefault() {
+    return {
+        Component: RenderNothing,
+        props: {},
+    };
+}
+
+export { getRouteMachineSelector, resolveConfirmResetPasswordRoute, resolveConfirmSignInRoute, resolveConfirmSignUpRoute, resolveConfirmVerifyUserRoute, resolveDefault, resolveForceNewPasswordRoute, resolveResetPasswordRoute, resolveSetupTOTPRoute, resolveSignInRoute, resolveSignUpRoute, resolveVerifyUserRoute, routeSelector };

package/dist/esm/Authenticator/hooks/utils.js

@@ -0,0 +1,24 @@
+import { COMPONENT_ROUTE_KEYS, COMPONENT_ROUTE_NAMES } from './constants.js';
+
+const isComponentRouteKey = (route) => COMPONENT_ROUTE_KEYS.some((componentRoute) => componentRoute === route);
+function resolveAuthenticatorComponents(defaults, overrides) {
+    if (!overrides) {
+        return defaults;
+    }
+    return COMPONENT_ROUTE_NAMES.reduce((components, route) => {
+        const Default = defaults[route];
+        const Override = overrides[route];
+        if (typeof Override !== 'function') {
+            return Object.assign(Object.assign({}, components), { [route]: Default });
+        }
+        const { Footer, FormFields, Header } = Default;
+        // cast to allow assigning of component slots
+        const Component = Override;
+        Component.Footer = Footer;
+        Component.FormFields = FormFields;
+        Component.Header = Header;
+        return Object.assign(Object.assign({}, components), { [route]: Component });
+    }, {});
+}
+
+export { isComponentRouteKey, resolveAuthenticatorComponents };

package/dist/esm/InAppMessaging/hooks/useMessage/useMessage.js

@@ -1,7 +1,7 @@
 import { ConsoleLogger } from '@aws-amplify/core';
 import { InAppMessageInteractionEvent, Notifications } from '@aws-amplify/notifications';
 import isNil from 'lodash/isNil';
-import RenderNothng from '../../../components/RenderNothing/RenderNothing.js';
+import RenderNothing from '../../../components/RenderNothing/RenderNothing.js';
 import useInAppMessaging from '../useInAppMessaging/useInAppMessaging.js';
 import { getContentProps, getPositionProp } from './utils.js';
 
@@ -19,7 +19,7 @@ function useMessage({ components, onMessageAction, }) {
     const { BannerMessage, CarouselMessage, FullScreenMessage, ModalMessage } = components;
     if (isNil(message)) {
         return {
-            Component: RenderNothng,
+            Component: RenderNothing,
             props: EMPTY_PROPS,
         };
     }
@@ -68,7 +68,7 @@ function useMessage({ components, onMessageAction, }) {
         default: {
             logger.info(`Received unknown InAppMessage layout: ${layout}`);
             return {
-                Component: RenderNothng,
+                Component: RenderNothing,
                 props: EMPTY_PROPS,
             };
         }

package/dist/esm/components/RenderNothing/RenderNothing.js

@@ -1,8 +1,8 @@
 /**
  * Utility component for rendering nothing.
  */
-function RenderNothng(_) {
+function RenderNothing(_) {
     return null;
 }
 
-export { RenderNothng as default };
+export { RenderNothing as default };

package/dist/esm/hooks/useHasValueUpdated.js

@@ -0,0 +1,13 @@
+import usePreviousValue from './usePreviousValue.js';
+import isUndefined from 'lodash/isUndefined';
+
+function useHasValueUpdated(value, ignoreFirstRender = false) {
+    const previous = usePreviousValue(value);
+    const shouldIgnoreChange = isUndefined(previous) && ignoreFirstRender;
+    if (shouldIgnoreChange) {
+        return false;
+    }
+    return previous !== value;
+}
+
+export { useHasValueUpdated as default };

package/dist/esm/hooks/usePreviousValue.js

@@ -0,0 +1,13 @@
+import { useRef, useEffect } from 'react';
+
+function usePreviousValue(value) {
+    const previous = useRef();
+    // update ref post render
+    useEffect(() => {
+        previous.current = value;
+    }, [value]);
+    // return previous ref
+    return previous.current;
+}
+
+export { usePreviousValue as default };

package/dist/esm/index.js

@@ -1,8 +1,13 @@
 export { default as AuthenticatorProvider } from './Authenticator/context/AuthenticatorProvider.js';
 import './Authenticator/context/AuthenticatorContext.js';
 export { default as useAuthenticator } from './Authenticator/hooks/useAuthenticator/useAuthenticator.js';
+export { default as useAuthenticatorRoute } from './Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.js';
+export { default as useAuthenticatorInitMachine } from './Authenticator/hooks/useAuthenticatorInitMachine/useAuthenticatorInitMachine.js';
+export { isComponentRouteKey as isAuthenticatorComponentRouteKey, resolveAuthenticatorComponents } from './Authenticator/hooks/utils.js';
 export { default as useInAppMessaging } from './InAppMessaging/hooks/useInAppMessaging/useInAppMessaging.js';
 export { default as useMessage } from './InAppMessaging/hooks/useMessage/useMessage.js';
 import './InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.js';
 export { default as InAppMessagingProvider } from './InAppMessaging/context/InAppMessagingProvider/InAppMessagingProvider.js';
 export { default as handleMessageAction } from './InAppMessaging/utils/handleMessageAction.js';
+export { default as usePreviousValue } from './hooks/usePreviousValue.js';
+export { default as useHasValueUpdated } from './hooks/useHasValueUpdated.js';