@aws-amplify/ui-react-notifications 1.0.14 → 2.0.0

package/dist/index.js

@@ -1 +1,394 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@aws-amplify/ui-react-core-notifications"),t=require("react"),n=require("@aws-amplify/ui-react"),a=require("classnames"),s=require("@aws-amplify/core"),l=require("@aws-amplify/ui"),o=require("@aws-amplify/ui-react/internal"),r=require("tinycolor2");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u,d=c(t),g=i(t),m=i(a),p=i(r);!function(e){e.Aborted="ABORTED",e.Failure="FAILURE",e.Fetching="FETCHING",e.Success="SUCCESS"}(u||(u={}));const y=new s.ConsoleLogger("Notifications.InAppMessaging");const f=({body:e,container:t,header:n,primaryButton:a,secondaryButton:s})=>{var l,o,r,i,c;return{body:null!==(l=null==e?void 0:e.style)&&void 0!==l?l:{},container:null!==(o=null==t?void 0:t.style)&&void 0!==o?o:{},header:null!==(r=null==n?void 0:n.style)&&void 0!==r?r:{},primaryButton:null!==(i=null==a?void 0:a.style)&&void 0!==i?i:{},secondaryButton:null!==(c=null==s?void 0:s.style)&&void 0!==c?c:{}}};function b(e){const{image:n,onDisplay:a}=e,s=t.useRef(!1),{hasRenderableImage:l,isImageFetching:o}=function(e){const{src:n}=null!=e?e:{},a=!!n,[s,l]=t.useState(a?u.Fetching:null),o=s===u.Fetching,r=s===u.Success;return t.useEffect((()=>{if(!a)return;const e=new Image;e.onload=()=>{l(u.Success)},e.onabort=()=>{y.error(`Image load aborted: ${n}`),l(u.Aborted)},e.onerror=()=>{y.error(`Image failed to load: ${n}`),l(u.Failure)},e.src=n}),[a,n]),{hasRenderableImage:r,isImageFetching:o}}(n),r=!o;t.useEffect((()=>{!s.current&&r&&(null==a||a(),s.current=!0)}),[a,r]);const i=t.useMemo((()=>function({styleParams:e}){var t,n;const{payloadStyle:a,overrideStyle:s}=e;return{body:Object.assign(Object.assign({},null==a?void 0:a.body),null==s?void 0:s.body),closeIconButton:null!==(t=null==s?void 0:s.closeIconButton)&&void 0!==t?t:{},container:Object.assign(Object.assign({},null==a?void 0:a.container),null==s?void 0:s.container),header:Object.assign(Object.assign({},null==a?void 0:a.header),null==s?void 0:s.header),image:null!==(n=null==s?void 0:s.image)&&void 0!==n?n:{},primaryButton:Object.assign(Object.assign({},null==a?void 0:a.primaryButton),null==s?void 0:s.primaryButton),secondaryButton:Object.assign(Object.assign({},null==a?void 0:a.secondaryButton),null==s?void 0:s.secondaryButton)}}({styleParams:{payloadStyle:f(e),overrideStyle:e.style}})),[e]);return{hasRenderableImage:l,shouldRenderMessage:r,styles:i}}function v(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(a=Object.getOwnPropertySymbols(e);s<a.length;s++)t.indexOf(a[s])<0&&Object.prototype.propertyIsEnumerable.call(e,a[s])&&(n[a[s]]=e[a[s]])}return n}function E(e){var{className:t,dismissButtonLabel:a="Dismiss message",onClick:s,style:l}=e,r=v(e,["className","dismissButtonLabel","onClick","style"]);return d.createElement(n.Button,Object.assign({ariaLabel:a,className:t,onClick:s,style:l,variation:"link"},r),d.createElement(o.IconClose,{"aria-hidden":"true",size:"1.5rem"}))}const h="amplify-inappmessaging-messagelayout",O=`${h}__button`,I=`${h}__close-button`,j=`${h}__content`,M=`${h}__header`,B=`${h}__image-container`,$=`${h}__text-container`,x="inappmessaging-messagelayout-bodytext",k="inappmessaging-messagelayout-buttongroup",C="inappmessaging-messagelayout-content",F="inappmessaging-messagelayout-headertext",w="inappmessaging-messagelayout-imagecontainer",N="inappmessaging-messagelayout",A="inappmessaging-messagelayout-primarybutton",_="inappmessaging-messagelayout-secondarybutton",S="inappmessaging-messagelayout-textcontainer",P=(e,t="light")=>{const{backgroundColor:n}=null!=e?e:{};if(!n)return t;return p.default(n).isDark()?"dark":"light"},R=e=>!l.isEmpty(e);function q({body:e,buttonSize:t,hasRenderableImage:a,header:s,image:l,onClose:o,orientation:r="vertical",primaryButton:i,secondaryButton:c,styles:u}){const g=d.useMemo((()=>({primary:P(u.primaryButton),secondary:P(u.secondaryButton)})),[u]),p="horizontal"===r,y=d.createElement(E,{className:I,onClick:o,style:u.closeIconButton}),f=R(i),b=R(c),v=f||b;return d.createElement(n.Flex,{className:h,"data-testid":N,style:u.container},!p&&d.createElement(n.Flex,{justifyContent:"flex-end"},y),d.createElement(n.Flex,{className:m.default(j,`${j}--${r}`),"data-testid":C},a&&d.createElement(n.Flex,{className:m.default(B,`${B}--${r}`),"data-testid":w},d.createElement(n.Image,{alt:"In-App Message Image",src:null==l?void 0:l.src,style:u.image})),d.createElement(n.Flex,{className:m.default($,`${$}--${r}`),"data-testid":S},(null==s?void 0:s.content)&&d.createElement(n.Heading,{className:M,isTruncated:!0,level:2,style:u.header,testId:F},s.content),(null==e?void 0:e.content)&&d.createElement(n.Text,{style:u.body,testId:x},e.content)),p&&d.createElement(n.Flex,{alignItems:"flex-start"},y)),v&&d.createElement(n.ButtonGroup,{size:t,testId:k},b&&d.createElement(n.Button,{className:m.default(O,`${O}--${g.secondary}`),onClick:c.onAction,style:u.secondaryButton,testId:_},c.title),f&&d.createElement(n.Button,{className:m.default(O,`${O}--${g.primary}`),onClick:i.onAction,style:u.primaryButton,testId:A},i.title)))}const L="amplify-inappmessaging-bannermessage";function z(e){const t=b(e),a=n.useBreakpointValue([!0,!0,!1]),{shouldRenderMessage:s,styles:l}=t;if(!s)return null;const{alignment:o="right",position:r="top"}=e,i="center"===o&&"middle"===r;return g.default.createElement(n.Flex,{className:m.default(L,{[`${L}--${r}`]:!i,[`${L}--${o}`]:!i,[`${L}--center-middle`]:i,[`${L}--full-width`]:a}),role:"dialog",testId:`inappmessaging-${r}banner-dialog`},g.default.createElement(q,Object.assign({},e,t,{orientation:"horizontal",buttonSize:"small",styles:l})))}const D="inappmessaging-backdrop";function T(e){var{onClick:t}=e,a=v(e,["onClick"]);return g.default.createElement(n.View,Object.assign({className:"amplify-inappmessaging-backdrop","data-testid":D,onClick:t},a))}const U="amplify-inappmessaging-fullscreenmessage";function V(e){const t=b(e),a=n.useBreakpointValue([!0,!0,!1]),{shouldRenderMessage:s,styles:l}=t,{onClose:o}=e;if(!s)return null;const r=()=>d.createElement(n.Flex,{className:m.default(U,{[`${U}--fullscreen`]:a}),role:"dialog",testId:"inappmessaging-fullscreen-dialog"},d.createElement(q,Object.assign({},e,t,{styles:l})));if(a)return d.createElement(r,null);const i=function(e,t={}){return function(a){return g.default.createElement(g.default.Fragment,null,g.default.createElement(T,Object.assign({},t)),g.default.createElement(n.Flex,{className:"amplify-inappmessaging-backdrop-content-container"},g.default.createElement(n.View,{className:"amplify-inappmessaging-backdrop-content"},g.default.createElement(e,Object.assign({},a)))))}}(r,{onClick:o});return d.createElement(i,null)}const G="amplify-inappmessaging-modalmessage",H=`${G}__dialog`;function J(e){const t=b(e),a=n.useBreakpointValue([!0,!0,!1]),{shouldRenderMessage:s,styles:l}=t;return s?d.createElement(n.Flex,{className:G},d.createElement(n.Flex,{className:m.default(H,{[`${H}--full-width`]:a}),role:"dialog",testId:"inappmessaging-modal-dialog"},d.createElement(q,Object.assign({},e,t,{styles:l})))):null}const K=new s.ConsoleLogger("Notifications.InAppMessaging"),Q=e=>{let t;try{t=new URL(e)}catch(t){return void K.warn(`Unsupported url provided: ${e}`)}const{protocol:n}=t;"http:"===n||"https:"===n?window.open(e):K.warn(`Unsupported url protocol provided: ${n}`)};function W(e){return null}const X={BannerMessage:z,CarouselMessage:W,FullScreenMessage:V,ModalMessage:J},Y=({action:t,url:n})=>{e.handleMessageAction({action:t,url:n,handleMessageLinkAction:Q})};function Z({components:t}){const a=g.default.useMemo((()=>Object.assign(Object.assign({},X),t)),[t]),{Component:s,props:l}=e.useMessage({components:a,onMessageAction:Y});return g.default.createElement(n.ThemeProvider,{colorMode:"light"},g.default.createElement(s,Object.assign({},l)))}Z.BannerMessage=z,Z.CarouselMessage=W,Z.FullScreenMessage=V,Z.ModalMessage=J,Object.defineProperty(exports,"InAppMessagingProvider",{enumerable:!0,get:function(){return e.InAppMessagingProvider}}),Object.defineProperty(exports,"useInAppMessaging",{enumerable:!0,get:function(){return e.useInAppMessaging}}),exports.InAppMessageDisplay=Z,exports.withInAppMessaging=function(t,n){return function(a){return g.default.createElement(e.InAppMessagingProvider,null,g.default.createElement(Z,Object.assign({},n)),g.default.createElement(t,Object.assign({},a)))}};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var uiReactCoreNotifications = require('@aws-amplify/ui-react-core-notifications');
+var React = require('react');
+var uiReact = require('@aws-amplify/ui-react');
+var uiReactCore = require('@aws-amplify/ui-react-core');
+var ui = require('@aws-amplify/ui');
+var utils = require('aws-amplify/utils');
+var internal = require('@aws-amplify/ui-react/internal');
+var tinycolor = require('tinycolor2');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var tinycolor__default = /*#__PURE__*/_interopDefaultLegacy(tinycolor);
+
+var ImagePrefetchStatus;
+(function (ImagePrefetchStatus) {
+    ImagePrefetchStatus["Aborted"] = "ABORTED";
+    ImagePrefetchStatus["Failure"] = "FAILURE";
+    ImagePrefetchStatus["Fetching"] = "FETCHING";
+    ImagePrefetchStatus["Success"] = "SUCCESS";
+})(ImagePrefetchStatus || (ImagePrefetchStatus = {}));
+
+const logger$1 = new utils.ConsoleLogger('InAppMessaging');
+/**
+ * Handles prefetching for message images
+ *
+ * @param image contains image source
+ * @returns message image dimensions and fetching related booleans
+ */
+function useMessageImage(image) {
+    const { src } = image ?? {};
+    const shouldPrefetch = !!src;
+    // set initial status to fetching if prefetch is required
+    const [prefetchStatus, setPrefetchStatus] = React.useState(shouldPrefetch ? ImagePrefetchStatus.Fetching : null);
+    const isImageFetching = prefetchStatus === ImagePrefetchStatus.Fetching;
+    const hasRenderableImage = prefetchStatus === ImagePrefetchStatus.Success;
+    React.useEffect(() => {
+        if (!shouldPrefetch) {
+            return;
+        }
+        const img = new Image();
+        img.onload = () => {
+            setPrefetchStatus(ImagePrefetchStatus.Success);
+        };
+        img.onabort = () => {
+            logger$1.error(`Image load aborted: ${src}`);
+            setPrefetchStatus(ImagePrefetchStatus.Aborted);
+        };
+        img.onerror = () => {
+            logger$1.error(`Image failed to load: ${src}`);
+            setPrefetchStatus(ImagePrefetchStatus.Failure);
+        };
+        img.src = src;
+    }, [shouldPrefetch, src]);
+    return { hasRenderableImage, isImageFetching };
+}
+
+/**
+ * Utility for extracting message payload style
+ *
+ * @param props message props
+ *
+ * @returns message payload-specific styles
+ */
+const getPayloadStyle = ({ body, container, header, primaryButton, secondaryButton, }) => ({
+    body: body?.style ?? {},
+    container: container?.style ?? {},
+    header: header?.style ?? {},
+    primaryButton: primaryButton?.style ?? {},
+    secondaryButton: secondaryButton?.style ?? {},
+});
+/**
+ * Receives message styling and returns style property values for use with in-app message
+ * UI components. Handles resolving style precedence between payload and custom styles
+ *
+ * Styles resolve precedence from lowest to highest:
+ *   1. Payload styles
+ *   2. Custom (override) styles
+ *
+ * @param params message style params
+ *
+ * @returns message component styles
+ */
+function getMessageStyles({ styleParams, }) {
+    const { payloadStyle, overrideStyle } = styleParams;
+    return {
+        // message body style
+        body: {
+            ...payloadStyle?.body,
+            ...overrideStyle?.body,
+        },
+        // close button style - not defined in payload, override only
+        closeIconButton: overrideStyle?.closeIconButton ?? {},
+        // message container style
+        container: {
+            ...payloadStyle?.container,
+            ...overrideStyle?.container,
+        },
+        // message header style
+        header: {
+            ...payloadStyle?.header,
+            ...overrideStyle?.header,
+        },
+        // image style - not defined in payload, override only
+        image: overrideStyle?.image ?? {},
+        // message primary button style
+        primaryButton: {
+            ...payloadStyle?.primaryButton,
+            ...overrideStyle?.primaryButton,
+        },
+        // message secondary button style
+        secondaryButton: {
+            ...payloadStyle?.secondaryButton,
+            ...overrideStyle?.secondaryButton,
+        },
+    };
+}
+
+/**
+ * Handle common message UI component prop logic including render booleans, and
+ * style resolving
+ *
+ * @param props message UI component props
+ *
+ * @returns message UI component render related booleans and styles
+ */
+function useMessageProps(props) {
+    const { image, onDisplay } = props;
+    const hasDisplayed = React.useRef(false);
+    const { hasRenderableImage, isImageFetching } = useMessageImage(image);
+    const shouldRenderMessage = !isImageFetching;
+    React.useEffect(() => {
+        if (!hasDisplayed.current && shouldRenderMessage) {
+            onDisplay?.();
+            hasDisplayed.current = true;
+        }
+    }, [onDisplay, shouldRenderMessage]);
+    const styles = React.useMemo(() => getMessageStyles({
+        styleParams: {
+            payloadStyle: getPayloadStyle(props),
+            overrideStyle: props.style,
+        },
+    }), [props]);
+    return { hasRenderableImage, shouldRenderMessage, styles };
+}
+
+function CloseIconButton({ className, dismissButtonLabel = 'Dismiss message', onClick, style, ...rest }) {
+    return (React__namespace.createElement(uiReact.Button, { ariaLabel: dismissButtonLabel, className: className, onClick: onClick, style: style, variation: "link", ...rest },
+        React__namespace.createElement(internal.IconClose, { "aria-hidden": "true", size: "1.5rem" })));
+}
+
+// Base block class for MessageLayout
+const BLOCK_CLASS$3 = 'amplify-inappmessaging-messagelayout';
+// Element classes for MessageLayout
+const BUTTON_CLASS = `${BLOCK_CLASS$3}__button`;
+const CLOSE_BUTTON_CLASS = `${BLOCK_CLASS$3}__close-button`;
+const CONTENT_CLASS = `${BLOCK_CLASS$3}__content`;
+const HEADER_CLASS = `${BLOCK_CLASS$3}__header`;
+const IMAGE_CONTAINER_CLASS = `${BLOCK_CLASS$3}__image-container`;
+const TEXT_CONTAINER_CLASS = `${BLOCK_CLASS$3}__text-container`;
+// Test IDs
+const BODY_TEXT_TEST_ID = 'inappmessaging-messagelayout-bodytext';
+const BUTTON_GROUP_TEST_ID = 'inappmessaging-messagelayout-buttongroup';
+const CONTENT_TEST_ID = 'inappmessaging-messagelayout-content';
+const HEADER_TEXT_TEST_ID = 'inappmessaging-messagelayout-headertext';
+const IMAGE_CONTAINER_TEST_ID = 'inappmessaging-messagelayout-imagecontainer';
+const MESSAGE_LAYOUT_TEST_ID = 'inappmessaging-messagelayout';
+const PRIMARY_BUTTON_TEST_ID = 'inappmessaging-messagelayout-primarybutton';
+const SECONDARY_BUTTON_TEST_ID = 'inappmessaging-messagelayout-secondarybutton';
+const TEXT_CONTAINER_TEST_ID = 'inappmessaging-messagelayout-textcontainer';
+
+/**
+ * Utility for determining the class modifier for an In-App Messaging button
+ * based on its background color
+ *
+ * @param buttonStyles button styles which should contain the background color
+ * @param defaultModifier modifier that should be returned in cases where
+ * background color is undefined
+ *
+ * @returns the modifier - either 'light' or 'dark'
+ */
+const getButtonModifier = (buttonStyles, defaultModifier = 'light') => {
+    const { backgroundColor } = buttonStyles ?? {};
+    if (!backgroundColor) {
+        return defaultModifier;
+    }
+    const color = tinycolor__default["default"](backgroundColor);
+    return color.isDark() ? 'dark' : 'light';
+};
+
+const isMessageButton = (button) => !ui.isEmpty(button);
+function MessageLayout({ body, buttonSize, hasRenderableImage, header, image, onClose, orientation = 'vertical', primaryButton, secondaryButton, styles, }) {
+    const buttonModifiers = React__namespace.useMemo(() => ({
+        primary: getButtonModifier(styles.primaryButton),
+        secondary: getButtonModifier(styles.secondaryButton),
+    }), [styles]);
+    const isHorizontal = orientation === 'horizontal';
+    const closeButton = (React__namespace.createElement(CloseIconButton, { className: CLOSE_BUTTON_CLASS, onClick: onClose, style: styles.closeIconButton }));
+    const hasPrimaryButton = isMessageButton(primaryButton);
+    const hasSecondaryButton = isMessageButton(secondaryButton);
+    const hasButtons = hasPrimaryButton || hasSecondaryButton;
+    return (React__namespace.createElement(uiReact.Flex, { className: BLOCK_CLASS$3, "data-testid": MESSAGE_LAYOUT_TEST_ID, style: styles.container },
+        !isHorizontal && React__namespace.createElement(uiReact.Flex, { justifyContent: "flex-end" }, closeButton),
+        React__namespace.createElement(uiReact.Flex, { className: ui.classNames(CONTENT_CLASS, `${CONTENT_CLASS}--${orientation}`), "data-testid": CONTENT_TEST_ID },
+            hasRenderableImage && (React__namespace.createElement(uiReact.Flex, { className: ui.classNames(IMAGE_CONTAINER_CLASS, `${IMAGE_CONTAINER_CLASS}--${orientation}`), "data-testid": IMAGE_CONTAINER_TEST_ID },
+                React__namespace.createElement(uiReact.Image, { alt: "In-App Message Image", src: image?.src, style: styles.image }))),
+            React__namespace.createElement(uiReact.Flex, { className: ui.classNames(TEXT_CONTAINER_CLASS, `${TEXT_CONTAINER_CLASS}--${orientation}`), "data-testid": TEXT_CONTAINER_TEST_ID },
+                header?.content && (React__namespace.createElement(uiReact.Heading, { className: HEADER_CLASS, isTruncated: true, level: 2, style: styles.header, testId: HEADER_TEXT_TEST_ID }, header.content)),
+                body?.content && (React__namespace.createElement(uiReact.Text, { style: styles.body, testId: BODY_TEXT_TEST_ID }, body.content))),
+            isHorizontal && React__namespace.createElement(uiReact.Flex, { alignItems: "flex-start" }, closeButton)),
+        hasButtons && (React__namespace.createElement(uiReact.ButtonGroup, { size: buttonSize, testId: BUTTON_GROUP_TEST_ID },
+            hasSecondaryButton && (React__namespace.createElement(uiReact.Button, { className: ui.classNames(BUTTON_CLASS, `${BUTTON_CLASS}--${buttonModifiers.secondary}`), onClick: secondaryButton.onAction, style: styles.secondaryButton, testId: SECONDARY_BUTTON_TEST_ID }, secondaryButton.title)),
+            hasPrimaryButton && (React__namespace.createElement(uiReact.Button, { className: ui.classNames(BUTTON_CLASS, `${BUTTON_CLASS}--${buttonModifiers.primary}`), onClick: primaryButton.onAction, style: styles.primaryButton, testId: PRIMARY_BUTTON_TEST_ID }, primaryButton.title))))));
+}
+
+// Base block class for BannerMessage
+const BLOCK_CLASS$2 = 'amplify-inappmessaging-bannermessage';
+
+function BannerMessage(props) {
+    const messageProps = useMessageProps(props);
+    const shouldBeFullWidth = uiReact.useBreakpointValue([true, true, false]);
+    const { shouldRenderMessage, styles } = messageProps;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    const { alignment = 'right', position = 'top' } = props;
+    const isCenterMiddle = alignment === 'center' && position === 'middle';
+    return (React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(BLOCK_CLASS$2, {
+            [`${BLOCK_CLASS$2}--${position}`]: !isCenterMiddle,
+            [`${BLOCK_CLASS$2}--${alignment}`]: !isCenterMiddle,
+            [`${BLOCK_CLASS$2}--center-middle`]: isCenterMiddle,
+            [`${BLOCK_CLASS$2}--full-width`]: shouldBeFullWidth,
+        }), role: "dialog", testId: `inappmessaging-${position}banner-dialog` },
+        React__default["default"].createElement(MessageLayout, { ...props, ...messageProps, orientation: "horizontal", buttonSize: "small", styles: styles })));
+}
+
+const BACKDROP_TEST_ID = 'inappmessaging-backdrop';
+function Backdrop({ onClick, ...rest }) {
+    return (React__default["default"].createElement(uiReact.View, { className: "amplify-inappmessaging-backdrop", "data-testid": BACKDROP_TEST_ID, onClick: onClick, ...rest }));
+}
+
+function withBackdrop(Content, options = {}) {
+    return function ContentWithBackdrop(props) {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(Backdrop, { ...options }),
+            React__default["default"].createElement(uiReact.Flex, { className: "amplify-inappmessaging-backdrop-content-container" },
+                React__default["default"].createElement(uiReact.View, { className: "amplify-inappmessaging-backdrop-content" },
+                    React__default["default"].createElement(Content, { ...props })))));
+    };
+}
+
+// Base block class for FullScreenMessage
+const BLOCK_CLASS$1 = 'amplify-inappmessaging-fullscreenmessage';
+
+function FullScreenMessage(props) {
+    const messageProps = useMessageProps(props);
+    const shouldBeFullScreen = uiReact.useBreakpointValue([true, true, false]);
+    const { shouldRenderMessage, styles } = messageProps;
+    const { onClose: onClick } = props;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    const Message = () => (React__namespace.createElement(uiReact.Flex, { className: ui.classNames(BLOCK_CLASS$1, {
+            [`${BLOCK_CLASS$1}--fullscreen`]: shouldBeFullScreen,
+        }), role: "dialog", testId: "inappmessaging-fullscreen-dialog" },
+        React__namespace.createElement(MessageLayout, { ...props, ...messageProps, styles: styles })));
+    if (shouldBeFullScreen) {
+        return React__namespace.createElement(Message, null);
+    }
+    const MessageWithBackdrop = withBackdrop(Message, { onClick });
+    return React__namespace.createElement(MessageWithBackdrop, null);
+}
+
+// Base block class for ModalMessage
+const BLOCK_CLASS = 'amplify-inappmessaging-modalmessage';
+// Element classes for ModalMessage
+const DIALOG_CLASS = `${BLOCK_CLASS}__dialog`;
+
+function ModalMessage(props) {
+    const messageProps = useMessageProps(props);
+    const shouldBeFullWidth = uiReact.useBreakpointValue([true, true, false]);
+    const { shouldRenderMessage, styles } = messageProps;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    return (React__namespace.createElement(uiReact.Flex, { className: BLOCK_CLASS },
+        React__namespace.createElement(uiReact.Flex, { className: ui.classNames(DIALOG_CLASS, {
+                [`${DIALOG_CLASS}--full-width`]: shouldBeFullWidth,
+            }), role: "dialog", testId: "inappmessaging-modal-dialog" },
+            React__namespace.createElement(MessageLayout, { ...props, ...messageProps, styles: styles }))));
+}
+
+const logger = new utils.ConsoleLogger('InAppMessaging');
+const handleMessageLinkAction = (input) => {
+    let url;
+    try {
+        url = new URL(input);
+    }
+    catch {
+        logger.warn(`Unsupported url provided: ${input}`);
+        return;
+    }
+    const { protocol } = url;
+    const isHttpProtocol = protocol === 'http:';
+    const isHttpsProtocol = protocol === 'https:';
+    if (!(isHttpProtocol || isHttpsProtocol)) {
+        logger.warn(`Unsupported url protocol provided: ${protocol}`);
+        return;
+    }
+    window.open(input);
+};
+
+const VERSION = '1.0.13';
+
+// TODO: replace below components incrementally as they become available
+function CarouselMessage(_) {
+    return null;
+}
+const platformComponents = {
+    BannerMessage,
+    CarouselMessage,
+    FullScreenMessage,
+    ModalMessage,
+};
+const onMessageAction = ({ action, url }) => {
+    uiReactCoreNotifications.handleMessageAction({
+        action,
+        url,
+        handleMessageLinkAction,
+    });
+};
+function InAppMessageDisplay({ components: overrideComponents, }) {
+    const components = React__default["default"].useMemo(() => ({ ...platformComponents, ...overrideComponents }), [overrideComponents]);
+    const { Component, props } = uiReactCoreNotifications.useMessage({
+        components,
+        onMessageAction,
+    });
+    uiReactCore.useSetUserAgent({
+        componentName: 'InAppMessaging',
+        packageName: 'react-notifications',
+        version: VERSION,
+    });
+    // There is currently no way to pass In-App Message payload variants so we
+    // will fix the theme around In-App Messaging components to always assume
+    // light mode
+    return (React__default["default"].createElement(uiReact.ThemeProvider, { colorMode: "light" },
+        React__default["default"].createElement(Component, { ...props })));
+}
+InAppMessageDisplay.BannerMessage = BannerMessage;
+InAppMessageDisplay.CarouselMessage = CarouselMessage;
+InAppMessageDisplay.FullScreenMessage = FullScreenMessage;
+InAppMessageDisplay.ModalMessage = ModalMessage;
+
+function withInAppMessaging(Component, options) {
+    return function WrappedWithInAppMessaging(props) {
+        return (React__default["default"].createElement(uiReactCoreNotifications.InAppMessagingProvider, null,
+            React__default["default"].createElement(InAppMessageDisplay, { ...options }),
+            React__default["default"].createElement(Component, { ...props })));
+    };
+}
+
+Object.defineProperty(exports, 'InAppMessagingProvider', {
+    enumerable: true,
+    get: function () { return uiReactCoreNotifications.InAppMessagingProvider; }
+});
+Object.defineProperty(exports, 'useInAppMessaging', {
+    enumerable: true,
+    get: function () { return uiReactCoreNotifications.useInAppMessaging; }
+});
+exports.InAppMessageDisplay = InAppMessageDisplay;
+exports.withInAppMessaging = withInAppMessaging;