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

package/dist/esm/Authenticator/context/AuthenticatorContext.js

@@ -1,7 +1,10 @@
 import React from 'react';
+
 /**
  * AuthenticatorContext serves static reference to the auth machine service.
  *
  * https://xstate.js.org/docs/recipes/react.html#context-provider
  */
-export const AuthenticatorContext = React.createContext(null);
+const AuthenticatorContext = React.createContext(null);
+
+export { AuthenticatorContext };

package/dist/esm/Authenticator/context/AuthenticatorProvider.js

@@ -1,8 +1,10 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useMemo, useEffect } from 'react';
 import { useInterpret } from '@xstate/react';
 import { createAuthenticatorMachine, listenToAuthHub } from '@aws-amplify/ui';
-import { AuthenticatorContext } from './AuthenticatorContext';
-export default function AuthenticatorProvider({ children, }) {
+import { AuthenticatorContext } from './AuthenticatorContext.js';
+
+function AuthenticatorProvider({ children, }) {
     /**
      * Based on use cases, developer might already have added another Provider
      * outside Authenticator. In that case, we sync the two providers by just
@@ -18,5 +20,7 @@ export default function AuthenticatorProvider({ children, }) {
         const unsubscribe = listenToAuthHub(activeService);
         return unsubscribe;
     }, [activeService]);
-    return (React.createElement(AuthenticatorContext.Provider, { value: value }, children));
+    return (jsx(AuthenticatorContext.Provider, Object.assign({ value: value }, { children: children })));
 }
+
+export { AuthenticatorProvider as default };

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

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

@@ -1,14 +1,16 @@
-import { __rest } from "tslib";
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
 import React, { useCallback, useMemo } from 'react';
 import { useSelector } from '@xstate/react';
 import { getServiceFacade } from '@aws-amplify/ui';
-import { AuthenticatorContext } from '../../context';
-import { USE_AUTHENTICATOR_ERROR } from './constants';
-import { defaultComparator, getComparator, getLegacyFields, getTotpSecretCodeCallback, } from './utils';
+import 'react/jsx-runtime';
+import { AuthenticatorContext } from '../../context/AuthenticatorContext.js';
+import { USE_AUTHENTICATOR_ERROR } from './constants.js';
+import { getMachineFields, getTotpSecretCodeCallback, getComparator, defaultComparator } from './utils.js';
+
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#useauthenticator-hook)
  */
-export default function useAuthenticator(selector) {
+function useAuthenticator(selector) {
     const context = React.useContext(AuthenticatorContext);
     if (!context) {
         throw new Error(USE_AUTHENTICATOR_ERROR);
@@ -18,18 +20,17 @@ export default 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, 
-        /** @deprecated For internal use only */
-        _state: serviceSnapshot, 
-        /** @deprecated For internal use only */
-        _send: send });
+        fields });
 }
+
+export { useAuthenticator as default };

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

@@ -1,14 +1,16 @@
-import { __awaiter } from "tslib";
+import { __awaiter } from '../../../node_modules/tslib/tslib.es6.js';
 import { Auth } from 'aws-amplify';
-import { getSortedFormFields, } from '@aws-amplify/ui';
-import { areEmptyArrays, areEmptyObjects } from '../../../utils';
-import { COMPONENT_ROUTE_KEYS } from './constants';
-export const defaultComparator = () => false;
+import { getSortedFormFields } from '@aws-amplify/ui';
+import isString from 'lodash/isString';
+import { areEmptyArrays, areEmptyObjects } from '../../../utils/index.js';
+import { isComponentRouteKey } from '../utils.js';
+
+const defaultComparator = () => false;
 /**
  * Does an ordering and shallow comparison of each array value,
  * plus a value equality check for empty objects and arrays.
  */
-export function areSelectorDepsEqual(currentDeps, nextDeps) {
+function areSelectorDepsEqual(currentDeps, nextDeps) {
     if (currentDeps.length !== nextDeps.length) {
         return false;
     }
@@ -21,24 +23,39 @@ export function areSelectorDepsEqual(currentDeps, nextDeps) {
         return currentDep === nextDep;
     });
 }
-export const getComparator = (selector) => (currentFacade, nextFacade) => {
+const getComparator = (selector) => (currentFacade, nextFacade) => {
     const currentSelectorDeps = selector(currentFacade);
     const nextSelectorDeps = selector(nextFacade);
     // Shallow compare the array values
     return areSelectorDepsEqual(currentSelectorDeps, nextSelectorDeps);
 };
-export const getTotpSecretCodeCallback = (user) => function getTotpSecretCode() {
+const getTotpSecretCodeCallback = (user) => function getTotpSecretCode() {
     return __awaiter(this, void 0, void 0, function* () {
         return yield Auth.setupTOTP(user);
     });
 };
-export 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
  */
-export 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, 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/context/InAppMessagingContext/InAppMessagingContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const InAppMessagingContext = createContext(null);
+
+export { InAppMessagingContext as default };

package/dist/esm/InAppMessaging/context/InAppMessagingProvider/InAppMessagingProvider.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { Notifications } from '@aws-amplify/notifications';
+import InAppMessagingContext from '../InAppMessagingContext/InAppMessagingContext.js';
+
+const { InAppMessaging } = Notifications;
+function InAppMessagingProvider({ children, }) {
+    const [message, setMessage] = useState(null);
+    useEffect(() => {
+        const listener = InAppMessaging.onMessageReceived((message) => {
+            setMessage(message);
+        });
+        return listener.remove;
+    }, []);
+    const clearMessage = useCallback(() => {
+        setMessage(null);
+    }, []);
+    const value = useMemo(() => ({
+        clearMessage,
+        displayMessage: setMessage,
+        message,
+    }), [clearMessage, message]);
+    return (jsx(InAppMessagingContext.Provider, Object.assign({ value: value }, { children: children })));
+}
+
+export { InAppMessagingProvider as default };

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

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import InAppMessagingContext from '../../context/InAppMessagingContext/InAppMessagingContext.js';
+import 'react/jsx-runtime';
+import '@aws-amplify/notifications';
+
+/**
+ * Utility hook used to access the InAppMessagingContext values
+ *
+ * @returns {InAppMessagingContextType} InAppMessaging context values
+ */
+function useInAppMessaging() {
+    const inAppMessagingContext = useContext(InAppMessagingContext);
+    if (!inAppMessagingContext) {
+        throw new Error('InAppMessagingContext is empty, did you forget the InAppMessagingProvider?');
+    }
+    return inAppMessagingContext;
+}
+
+export { useInAppMessaging as default };

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

@@ -0,0 +1,78 @@
+import { ConsoleLogger } from '@aws-amplify/core';
+import { InAppMessageInteractionEvent, Notifications } from '@aws-amplify/notifications';
+import isNil from 'lodash/isNil';
+import RenderNothing from '../../../components/RenderNothing/RenderNothing.js';
+import useInAppMessaging from '../useInAppMessaging/useInAppMessaging.js';
+import { getContentProps, getPositionProp } from './utils.js';
+
+const EMPTY_PROPS = Object.freeze({});
+const logger = new ConsoleLogger('Notifications.InAppMessaging');
+const { InAppMessaging } = Notifications;
+/**
+ * Utility hook for parsing a message and retrieving its corresponding UI component and props
+ *
+ * @param {UseMessageParams} props - platform specific UI components, action handler, and styles
+ * @returns {UseMessage} message UI component and props
+ */
+function useMessage({ components, onMessageAction, }) {
+    const { clearMessage, message } = useInAppMessaging();
+    const { BannerMessage, CarouselMessage, FullScreenMessage, ModalMessage } = components;
+    if (isNil(message)) {
+        return {
+            Component: RenderNothing,
+            props: EMPTY_PROPS,
+        };
+    }
+    const { content, layout } = message;
+    const onActionCallback = () => {
+        InAppMessaging.notifyMessageInteraction(message, InAppMessageInteractionEvent.MESSAGE_ACTION_TAKEN);
+        clearMessage();
+    };
+    const onClose = () => {
+        InAppMessaging.notifyMessageInteraction(message, InAppMessageInteractionEvent.MESSAGE_DISMISSED);
+        clearMessage();
+    };
+    const onDisplay = () => {
+        InAppMessaging.notifyMessageInteraction(message, InAppMessageInteractionEvent.MESSAGE_DISPLAYED);
+    };
+    switch (layout) {
+        case 'BOTTOM_BANNER':
+        case 'MIDDLE_BANNER':
+        case 'TOP_BANNER': {
+            const props = Object.assign(Object.assign({}, getContentProps(content === null || content === void 0 ? void 0 : content[0], onMessageAction, onActionCallback)), { layout,
+                onClose,
+                onDisplay, position: getPositionProp(layout) });
+            return { Component: BannerMessage, props };
+        }
+        case 'CAROUSEL': {
+            const props = {
+                data: content === null || content === void 0 ? void 0 : content.map((item) => getContentProps(item, onMessageAction, onActionCallback)),
+                layout,
+                onClose,
+                onDisplay,
+            };
+            return { Component: CarouselMessage, props };
+        }
+        case 'FULL_SCREEN': {
+            const props = Object.assign(Object.assign({}, getContentProps(content === null || content === void 0 ? void 0 : content[0], onMessageAction, onActionCallback)), { layout,
+                onClose,
+                onDisplay });
+            return { Component: FullScreenMessage, props };
+        }
+        case 'MODAL': {
+            const props = Object.assign(Object.assign({}, getContentProps(content === null || content === void 0 ? void 0 : content[0], onMessageAction, onActionCallback)), { layout,
+                onClose,
+                onDisplay });
+            return { Component: ModalMessage, props };
+        }
+        default: {
+            logger.info(`Received unknown InAppMessage layout: ${layout}`);
+            return {
+                Component: RenderNothing,
+                props: EMPTY_PROPS,
+            };
+        }
+    }
+}
+
+export { EMPTY_PROPS, useMessage as default };

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

@@ -0,0 +1,43 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import { ConsoleLogger } from '@aws-amplify/core';
+
+const logger = new ConsoleLogger('Notifications.InAppMessaging');
+const positions = {
+    BOTTOM_BANNER: 'bottom',
+    MIDDLE_BANNER: 'middle',
+    TOP_BANNER: 'top',
+};
+const getPositionProp = (layout) => positions[layout];
+const getActionHandler = (actionParams, onMessageAction, onActionCallback) => ({
+    onAction() {
+        try {
+            onMessageAction(actionParams);
+        }
+        catch (e) {
+            logger.error(`Message action failure: ${e}`);
+        }
+        finally {
+            onActionCallback();
+        }
+    },
+});
+const getButtonProps = (_a, onMessageAction, onActionCallback) => {
+    var { action, url } = _a, baseButtonProps = __rest(_a, ["action", "url"]);
+    return (Object.assign(Object.assign({}, baseButtonProps), getActionHandler({ action, url }, onMessageAction, onActionCallback)));
+};
+const getContentProps = (content, onMessageAction, onActionCallback) => {
+    const props = {};
+    if (!content) {
+        return props;
+    }
+    const { primaryButton, secondaryButton } = content, restContent = __rest(content, ["primaryButton", "secondaryButton"]);
+    if (primaryButton) {
+        props.primaryButton = getButtonProps(primaryButton, onMessageAction, onActionCallback);
+    }
+    if (secondaryButton) {
+        props.secondaryButton = getButtonProps(secondaryButton, onMessageAction, onActionCallback);
+    }
+    return Object.assign(Object.assign({}, props), restContent);
+};
+
+export { getActionHandler, getContentProps, getPositionProp };

package/dist/esm/InAppMessaging/utils/handleMessageAction.js

@@ -0,0 +1,16 @@
+import { ConsoleLogger } from '@aws-amplify/core';
+import isString from 'lodash/isString';
+
+const logger = new ConsoleLogger('Notifications.InAppMessaging');
+const handleMessageAction = ({ action, handleMessageLinkAction, url, }) => {
+    logger.info(`Handle action: ${action}`);
+    if (action === 'LINK' || action === 'DEEP_LINK') {
+        if (!isString(url)) {
+            logger.warn(`url must be of type string: ${url}`);
+            return;
+        }
+        handleMessageLinkAction(url);
+    }
+};
+
+export { handleMessageAction as default };

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

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