@aws-amplify/ui-react-core 1.0.5 → 2.0.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/useAuthenticator/constants.js

@@ -1,5 +1,5 @@
-export const USE_AUTHENTICATOR_ERROR = '`useAuthenticator` must be used inside an `Authenticator.Provider`.';
-export const COMPONENT_ROUTE_KEYS = [
+const USE_AUTHENTICATOR_ERROR = '`useAuthenticator` must be used inside an `Authenticator.Provider`.';
+const COMPONENT_ROUTE_KEYS = [
     'signIn',
     'signUp',
     'forceNewPassword',
@@ -11,3 +11,5 @@ export const COMPONENT_ROUTE_KEYS = [
     'setupTOTP',
     'verifyUser',
 ];
+
+export { COMPONENT_ROUTE_KEYS, 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 { getLegacyFields, 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);
@@ -27,9 +29,7 @@ export default function useAuthenticator(selector) {
     return Object.assign(Object.assign({}, rest), { getTotpSecretCode: getTotpSecretCodeCallback(user), route,
         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,15 @@
-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 { areEmptyArrays, areEmptyObjects } from '../../../utils/index.js';
+import { COMPONENT_ROUTE_KEYS } from './constants.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 +22,26 @@ 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 isComponentRouteKey = (route) => COMPONENT_ROUTE_KEYS.some((componentRoute) => componentRoute === route);
 const flattenFormFields = (fields) => fields.flatMap(([name, options]) => (Object.assign({ name }, options)));
 /**
  * Retrieves legacy form field values from state machine for routes that have fields
  */
-export const getLegacyFields = (route, state) => 
+const getLegacyFields = (route, state) => 
 // verifyUser is a component route, but does not have form fields
 isComponentRouteKey(route) && route !== 'verifyUser'
     ? flattenFormFields(getSortedFormFields(route, state))
     : [];
+
+export { areSelectorDepsEqual, defaultComparator, getComparator, getLegacyFields, getTotpSecretCodeCallback, isComponentRouteKey };

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 RenderNothng 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: RenderNothng,
+            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: RenderNothng,
+                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 RenderNothng(_) {
+    return null;
+}
+
+export { RenderNothng as default };

package/dist/esm/index.js

@@ -1 +1,8 @@
-export { AuthenticatorProvider, useAuthenticator, } from './Authenticator';
+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 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';

package/dist/esm/node_modules/tslib/tslib.es6.js

@@ -0,0 +1,38 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+export { __awaiter, __rest };

package/dist/esm/utils/index.js

@@ -1,14 +1,17 @@
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
+
 function isEmptyArray(value) {
     return Array.isArray(value) && isEmpty(value);
 }
-export function areEmptyArrays(...values) {
+function areEmptyArrays(...values) {
     return values.every(isEmptyArray);
 }
 function isEmptyObject(value) {
     return isObject(value) && !Array.isArray(value) && isEmpty(value);
 }
-export function areEmptyObjects(...values) {
+function areEmptyObjects(...values) {
     return values.every(isEmptyObject);
 }
+
+export { areEmptyArrays, areEmptyObjects };