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

package/dist/esm/components/InAppMessaging/Backdrop/Backdrop.mjs

@@ -1 +1,9 @@
-import{__rest as a}from"../../../node_modules/tslib/tslib.es6.mjs";import i from"react";import{View as t}from"@aws-amplify/ui-react";const e="inappmessaging-backdrop";function o(o){var{onClick:s}=o,r=a(o,["onClick"]);return i.createElement(t,Object.assign({className:"amplify-inappmessaging-backdrop","data-testid":e,onClick:s},r))}export{e as BACKDROP_TEST_ID,o as Backdrop};
+import React__default from 'react';
+import { View } from '@aws-amplify/ui-react';
+
+const BACKDROP_TEST_ID = 'inappmessaging-backdrop';
+function Backdrop({ onClick, ...rest }) {
+    return (React__default.createElement(View, { className: "amplify-inappmessaging-backdrop", "data-testid": BACKDROP_TEST_ID, onClick: onClick, ...rest }));
+}
+
+export { BACKDROP_TEST_ID, Backdrop };

package/dist/esm/components/InAppMessaging/Backdrop/withBackdrop.mjs

@@ -1 +1,15 @@
-import e from"react";import{Flex as t,View as a}from"@aws-amplify/ui-react";import{Backdrop as n}from"./Backdrop.mjs";function r(r,m={}){return function(c){return e.createElement(e.Fragment,null,e.createElement(n,Object.assign({},m)),e.createElement(t,{className:"amplify-inappmessaging-backdrop-content-container"},e.createElement(a,{className:"amplify-inappmessaging-backdrop-content"},e.createElement(r,Object.assign({},c)))))}}export{r as withBackdrop};
+import React__default from 'react';
+import { Flex, View } from '@aws-amplify/ui-react';
+import { Backdrop } from './Backdrop.mjs';
+
+function withBackdrop(Content, options = {}) {
+    return function ContentWithBackdrop(props) {
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Backdrop, { ...options }),
+            React__default.createElement(Flex, { className: "amplify-inappmessaging-backdrop-content-container" },
+                React__default.createElement(View, { className: "amplify-inappmessaging-backdrop-content" },
+                    React__default.createElement(Content, { ...props })))));
+    };
+}
+
+export { withBackdrop };

package/dist/esm/components/InAppMessaging/BannerMessage/BannerMessage.mjs

@@ -1 +1,27 @@
-import e from"react";import s from"classnames";import{useBreakpointValue as t,Flex as o}from"@aws-amplify/ui-react";import"../hooks/useMessageImage/useMessageImage.mjs";import a from"../hooks/useMessageProps/useMessageProps.mjs";import{MessageLayout as r}from"../MessageLayout/MessageLayout.mjs";import{BLOCK_CLASS as m}from"./constants.mjs";function i(i){const n=a(i),l=t([!0,!0,!1]),{shouldRenderMessage:g,styles:p}=n;if(!g)return null;const{alignment:u="right",position:c="top"}=i,d="center"===u&&"middle"===c;return e.createElement(o,{className:s(m,{[`${m}--${c}`]:!d,[`${m}--${u}`]:!d,[`${m}--center-middle`]:d,[`${m}--full-width`]:l}),role:"dialog",testId:`inappmessaging-${c}banner-dialog`},e.createElement(r,Object.assign({},i,n,{orientation:"horizontal",buttonSize:"small",styles:p})))}export{i as BannerMessage};
+import React__default from 'react';
+import { classNames } from '@aws-amplify/ui';
+import { useBreakpointValue, Flex } from '@aws-amplify/ui-react';
+import '../hooks/useMessageImage/useMessageImage.mjs';
+import useMessageProps from '../hooks/useMessageProps/useMessageProps.mjs';
+import { MessageLayout } from '../MessageLayout/MessageLayout.mjs';
+import { BLOCK_CLASS } from './constants.mjs';
+
+function BannerMessage(props) {
+    const messageProps = useMessageProps(props);
+    const shouldBeFullWidth = 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.createElement(Flex, { className: classNames(BLOCK_CLASS, {
+            [`${BLOCK_CLASS}--${position}`]: !isCenterMiddle,
+            [`${BLOCK_CLASS}--${alignment}`]: !isCenterMiddle,
+            [`${BLOCK_CLASS}--center-middle`]: isCenterMiddle,
+            [`${BLOCK_CLASS}--full-width`]: shouldBeFullWidth,
+        }), role: "dialog", testId: `inappmessaging-${position}banner-dialog` },
+        React__default.createElement(MessageLayout, { ...props, ...messageProps, orientation: "horizontal", buttonSize: "small", styles: styles })));
+}
+
+export { BannerMessage };

package/dist/esm/components/InAppMessaging/BannerMessage/constants.mjs

@@ -1 +1,4 @@
-const a="amplify-inappmessaging-bannermessage";export{a as BLOCK_CLASS};
+// Base block class for BannerMessage
+const BLOCK_CLASS = 'amplify-inappmessaging-bannermessage';
+
+export { BLOCK_CLASS };

package/dist/esm/components/InAppMessaging/CloseIconButton/CloseIconButton.mjs

@@ -1 +1,10 @@
-import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs";import*as s from"react";import{Button as a}from"@aws-amplify/ui-react";import{IconClose as i}from"@aws-amplify/ui-react/internal";function t(t){var{className:r,dismissButtonLabel:m="Dismiss message",onClick:l,style:o}=t,n=e(t,["className","dismissButtonLabel","onClick","style"]);return s.createElement(a,Object.assign({ariaLabel:m,className:r,onClick:l,style:o,variation:"link"},n),s.createElement(i,{"aria-hidden":"true",size:"1.5rem"}))}export{t as CloseIconButton};
+import * as React from 'react';
+import { Button } from '@aws-amplify/ui-react';
+import { IconClose } from '@aws-amplify/ui-react/internal';
+
+function CloseIconButton({ className, dismissButtonLabel = 'Dismiss message', onClick, style, ...rest }) {
+    return (React.createElement(Button, { ariaLabel: dismissButtonLabel, className: className, onClick: onClick, style: style, variation: "link", ...rest },
+        React.createElement(IconClose, { "aria-hidden": "true", size: "1.5rem" })));
+}
+
+export { CloseIconButton };

package/dist/esm/components/InAppMessaging/FullScreenMessage/FullScreenMessage.mjs

@@ -1 +1,29 @@
-import*as e from"react";import s from"classnames";import{useBreakpointValue as o,Flex as r}from"@aws-amplify/ui-react";import{withBackdrop as t}from"../Backdrop/withBackdrop.mjs";import"../hooks/useMessageImage/useMessageImage.mjs";import a from"../hooks/useMessageProps/useMessageProps.mjs";import{MessageLayout as m}from"../MessageLayout/MessageLayout.mjs";import{BLOCK_CLASS as n}from"./constants.mjs";function l(l){const i=a(l),c=o([!0,!0,!1]),{shouldRenderMessage:u,styles:p}=i,{onClose:g}=l;if(!u)return null;const f=()=>e.createElement(r,{className:s(n,{[`${n}--fullscreen`]:c}),role:"dialog",testId:"inappmessaging-fullscreen-dialog"},e.createElement(m,Object.assign({},l,i,{styles:p})));if(c)return e.createElement(f,null);const d=t(f,{onClick:g});return e.createElement(d,null)}export{l as FullScreenMessage};
+import * as React from 'react';
+import { classNames } from '@aws-amplify/ui';
+import { useBreakpointValue, Flex } from '@aws-amplify/ui-react';
+import { withBackdrop } from '../Backdrop/withBackdrop.mjs';
+import '../hooks/useMessageImage/useMessageImage.mjs';
+import useMessageProps from '../hooks/useMessageProps/useMessageProps.mjs';
+import { MessageLayout } from '../MessageLayout/MessageLayout.mjs';
+import { BLOCK_CLASS } from './constants.mjs';
+
+function FullScreenMessage(props) {
+    const messageProps = useMessageProps(props);
+    const shouldBeFullScreen = useBreakpointValue([true, true, false]);
+    const { shouldRenderMessage, styles } = messageProps;
+    const { onClose: onClick } = props;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    const Message = () => (React.createElement(Flex, { className: classNames(BLOCK_CLASS, {
+            [`${BLOCK_CLASS}--fullscreen`]: shouldBeFullScreen,
+        }), role: "dialog", testId: "inappmessaging-fullscreen-dialog" },
+        React.createElement(MessageLayout, { ...props, ...messageProps, styles: styles })));
+    if (shouldBeFullScreen) {
+        return React.createElement(Message, null);
+    }
+    const MessageWithBackdrop = withBackdrop(Message, { onClick });
+    return React.createElement(MessageWithBackdrop, null);
+}
+
+export { FullScreenMessage };

package/dist/esm/components/InAppMessaging/FullScreenMessage/constants.mjs

@@ -1 +1,4 @@
-const e="amplify-inappmessaging-fullscreenmessage";export{e as BLOCK_CLASS};
+// Base block class for FullScreenMessage
+const BLOCK_CLASS = 'amplify-inappmessaging-fullscreenmessage';
+
+export { BLOCK_CLASS };

package/dist/esm/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.mjs

@@ -1 +1,50 @@
-import e from"react";import{useMessage as s,handleMessageAction as a}from"@aws-amplify/ui-react-core-notifications";import{ThemeProvider as o}from"@aws-amplify/ui-react";import{BannerMessage as n}from"../BannerMessage/BannerMessage.mjs";import{FullScreenMessage as r}from"../FullScreenMessage/FullScreenMessage.mjs";import{ModalMessage as t}from"../ModalMessage/ModalMessage.mjs";import i from"./handleMessageLinkAction.mjs";function l(e){return null}const c={BannerMessage:n,CarouselMessage:l,FullScreenMessage:r,ModalMessage:t},m=({action:e,url:s})=>{a({action:e,url:s,handleMessageLinkAction:i})};function M({components:a}){const n=e.useMemo((()=>Object.assign(Object.assign({},c),a)),[a]),{Component:r,props:t}=s({components:n,onMessageAction:m});return e.createElement(o,{colorMode:"light"},e.createElement(r,Object.assign({},t)))}M.BannerMessage=n,M.CarouselMessage=l,M.FullScreenMessage=r,M.ModalMessage=t;export{M as default};
+import React__default from 'react';
+import { useMessage, handleMessageAction } from '@aws-amplify/ui-react-core-notifications';
+import { ThemeProvider } from '@aws-amplify/ui-react';
+import { useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { BannerMessage } from '../BannerMessage/BannerMessage.mjs';
+import { FullScreenMessage } from '../FullScreenMessage/FullScreenMessage.mjs';
+import { ModalMessage } from '../ModalMessage/ModalMessage.mjs';
+import handleMessageLinkAction from './handleMessageLinkAction.mjs';
+import { VERSION } from '../../../version.mjs';
+
+// TODO: replace below components incrementally as they become available
+function CarouselMessage(_) {
+    return null;
+}
+const platformComponents = {
+    BannerMessage,
+    CarouselMessage,
+    FullScreenMessage,
+    ModalMessage,
+};
+const onMessageAction = ({ action, url }) => {
+    handleMessageAction({
+        action,
+        url,
+        handleMessageLinkAction,
+    });
+};
+function InAppMessageDisplay({ components: overrideComponents, }) {
+    const components = React__default.useMemo(() => ({ ...platformComponents, ...overrideComponents }), [overrideComponents]);
+    const { Component, props } = useMessage({
+        components,
+        onMessageAction,
+    });
+    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.createElement(ThemeProvider, { colorMode: "light" },
+        React__default.createElement(Component, { ...props })));
+}
+InAppMessageDisplay.BannerMessage = BannerMessage;
+InAppMessageDisplay.CarouselMessage = CarouselMessage;
+InAppMessageDisplay.FullScreenMessage = FullScreenMessage;
+InAppMessageDisplay.ModalMessage = ModalMessage;
+
+export { InAppMessageDisplay as default };

package/dist/esm/components/InAppMessaging/InAppMessageDisplay/handleMessageLinkAction.mjs

@@ -1 +1,23 @@
-import{ConsoleLogger as o}from"@aws-amplify/core";const t=new o("Notifications.InAppMessaging"),r=o=>{let r;try{r=new URL(o)}catch(r){return void t.warn(`Unsupported url provided: ${o}`)}const{protocol:p}=r;"http:"===p||"https:"===p?window.open(o):t.warn(`Unsupported url protocol provided: ${p}`)};export{r as default};
+import { ConsoleLogger } from 'aws-amplify/utils';
+
+const logger = new 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);
+};
+
+export { handleMessageLinkAction as default };

package/dist/esm/components/InAppMessaging/MessageLayout/MessageLayout.mjs

@@ -1 +1,33 @@
-import*as e from"react";import t from"classnames";import{isEmpty as a}from"@aws-amplify/ui";import{Flex as n,Image as s,Heading as o,Text as r,ButtonGroup as l,Button as m}from"@aws-amplify/ui-react";import{CloseIconButton as c}from"../CloseIconButton/CloseIconButton.mjs";import{CLOSE_BUTTON_CLASS as i,BLOCK_CLASS as d,MESSAGE_LAYOUT_TEST_ID as y,CONTENT_CLASS as u,CONTENT_TEST_ID as p,IMAGE_CONTAINER_CLASS as f,IMAGE_CONTAINER_TEST_ID as E,TEXT_CONTAINER_CLASS as I,TEXT_CONTAINER_TEST_ID as $,HEADER_CLASS as B,HEADER_TEXT_TEST_ID as N,BODY_TEXT_TEST_ID as C,BUTTON_GROUP_TEST_ID as g,BUTTON_CLASS as v,SECONDARY_BUTTON_TEST_ID as b,PRIMARY_BUTTON_TEST_ID as h}from"./constants.mjs";import{getButtonModifier as j}from"./utils.mjs";const k=e=>!a(e);function x({body:a,buttonSize:x,hasRenderableImage:z,header:A,image:w,onClose:M,orientation:R="vertical",primaryButton:S,secondaryButton:T,styles:q}){const D=e.useMemo((()=>({primary:j(q.primaryButton),secondary:j(q.secondaryButton)})),[q]),F="horizontal"===R,G=e.createElement(c,{className:i,onClick:M,style:q.closeIconButton}),H=k(S),J=k(T),K=H||J;return e.createElement(n,{className:d,"data-testid":y,style:q.container},!F&&e.createElement(n,{justifyContent:"flex-end"},G),e.createElement(n,{className:t(u,`${u}--${R}`),"data-testid":p},z&&e.createElement(n,{className:t(f,`${f}--${R}`),"data-testid":E},e.createElement(s,{alt:"In-App Message Image",src:null==w?void 0:w.src,style:q.image})),e.createElement(n,{className:t(I,`${I}--${R}`),"data-testid":$},(null==A?void 0:A.content)&&e.createElement(o,{className:B,isTruncated:!0,level:2,style:q.header,testId:N},A.content),(null==a?void 0:a.content)&&e.createElement(r,{style:q.body,testId:C},a.content)),F&&e.createElement(n,{alignItems:"flex-start"},G)),K&&e.createElement(l,{size:x,testId:g},J&&e.createElement(m,{className:t(v,`${v}--${D.secondary}`),onClick:T.onAction,style:q.secondaryButton,testId:b},T.title),H&&e.createElement(m,{className:t(v,`${v}--${D.primary}`),onClick:S.onAction,style:q.primaryButton,testId:h},S.title)))}export{x as MessageLayout};
+import * as React from 'react';
+import { classNames, isEmpty } from '@aws-amplify/ui';
+import { Flex, Image, Heading, Text, ButtonGroup, Button } from '@aws-amplify/ui-react';
+import { CloseIconButton } from '../CloseIconButton/CloseIconButton.mjs';
+import { CLOSE_BUTTON_CLASS, BLOCK_CLASS, MESSAGE_LAYOUT_TEST_ID, CONTENT_CLASS, CONTENT_TEST_ID, IMAGE_CONTAINER_CLASS, IMAGE_CONTAINER_TEST_ID, TEXT_CONTAINER_CLASS, TEXT_CONTAINER_TEST_ID, HEADER_CLASS, HEADER_TEXT_TEST_ID, BODY_TEXT_TEST_ID, BUTTON_GROUP_TEST_ID, BUTTON_CLASS, SECONDARY_BUTTON_TEST_ID, PRIMARY_BUTTON_TEST_ID } from './constants.mjs';
+import { getButtonModifier } from './utils.mjs';
+
+const isMessageButton = (button) => !isEmpty(button);
+function MessageLayout({ body, buttonSize, hasRenderableImage, header, image, onClose, orientation = 'vertical', primaryButton, secondaryButton, styles, }) {
+    const buttonModifiers = React.useMemo(() => ({
+        primary: getButtonModifier(styles.primaryButton),
+        secondary: getButtonModifier(styles.secondaryButton),
+    }), [styles]);
+    const isHorizontal = orientation === 'horizontal';
+    const closeButton = (React.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.createElement(Flex, { className: BLOCK_CLASS, "data-testid": MESSAGE_LAYOUT_TEST_ID, style: styles.container },
+        !isHorizontal && React.createElement(Flex, { justifyContent: "flex-end" }, closeButton),
+        React.createElement(Flex, { className: classNames(CONTENT_CLASS, `${CONTENT_CLASS}--${orientation}`), "data-testid": CONTENT_TEST_ID },
+            hasRenderableImage && (React.createElement(Flex, { className: classNames(IMAGE_CONTAINER_CLASS, `${IMAGE_CONTAINER_CLASS}--${orientation}`), "data-testid": IMAGE_CONTAINER_TEST_ID },
+                React.createElement(Image, { alt: "In-App Message Image", src: image?.src, style: styles.image }))),
+            React.createElement(Flex, { className: classNames(TEXT_CONTAINER_CLASS, `${TEXT_CONTAINER_CLASS}--${orientation}`), "data-testid": TEXT_CONTAINER_TEST_ID },
+                header?.content && (React.createElement(Heading, { className: HEADER_CLASS, isTruncated: true, level: 2, style: styles.header, testId: HEADER_TEXT_TEST_ID }, header.content)),
+                body?.content && (React.createElement(Text, { style: styles.body, testId: BODY_TEXT_TEST_ID }, body.content))),
+            isHorizontal && React.createElement(Flex, { alignItems: "flex-start" }, closeButton)),
+        hasButtons && (React.createElement(ButtonGroup, { size: buttonSize, testId: BUTTON_GROUP_TEST_ID },
+            hasSecondaryButton && (React.createElement(Button, { className: classNames(BUTTON_CLASS, `${BUTTON_CLASS}--${buttonModifiers.secondary}`), onClick: secondaryButton.onAction, style: styles.secondaryButton, testId: SECONDARY_BUTTON_TEST_ID }, secondaryButton.title)),
+            hasPrimaryButton && (React.createElement(Button, { className: classNames(BUTTON_CLASS, `${BUTTON_CLASS}--${buttonModifiers.primary}`), onClick: primaryButton.onAction, style: styles.primaryButton, testId: PRIMARY_BUTTON_TEST_ID }, primaryButton.title))))));
+}
+
+export { MessageLayout };

package/dist/esm/components/InAppMessaging/MessageLayout/constants.mjs

@@ -1 +1,21 @@
-const a="amplify-inappmessaging-messagelayout",e=`${a}__button`,s=`${a}__close-button`,n=`${a}__content`,t=`${a}__header`,g=`${a}__image-container`,i=`${a}__text-container`,o="inappmessaging-messagelayout-bodytext",m="inappmessaging-messagelayout-buttongroup",p="inappmessaging-messagelayout-content",u="inappmessaging-messagelayout-headertext",y="inappmessaging-messagelayout-imagecontainer",l="inappmessaging-messagelayout",_="inappmessaging-messagelayout-primarybutton",r="inappmessaging-messagelayout-secondarybutton",c="inappmessaging-messagelayout-textcontainer";export{a as BLOCK_CLASS,o as BODY_TEXT_TEST_ID,e as BUTTON_CLASS,m as BUTTON_GROUP_TEST_ID,s as CLOSE_BUTTON_CLASS,n as CONTENT_CLASS,p as CONTENT_TEST_ID,t as HEADER_CLASS,u as HEADER_TEXT_TEST_ID,g as IMAGE_CONTAINER_CLASS,y as IMAGE_CONTAINER_TEST_ID,l as MESSAGE_LAYOUT_TEST_ID,_ as PRIMARY_BUTTON_TEST_ID,r as SECONDARY_BUTTON_TEST_ID,i as TEXT_CONTAINER_CLASS,c as TEXT_CONTAINER_TEST_ID};
+// Base block class for MessageLayout
+const BLOCK_CLASS = 'amplify-inappmessaging-messagelayout';
+// Element classes for MessageLayout
+const BUTTON_CLASS = `${BLOCK_CLASS}__button`;
+const CLOSE_BUTTON_CLASS = `${BLOCK_CLASS}__close-button`;
+const CONTENT_CLASS = `${BLOCK_CLASS}__content`;
+const HEADER_CLASS = `${BLOCK_CLASS}__header`;
+const IMAGE_CONTAINER_CLASS = `${BLOCK_CLASS}__image-container`;
+const TEXT_CONTAINER_CLASS = `${BLOCK_CLASS}__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';
+
+export { BLOCK_CLASS, BODY_TEXT_TEST_ID, BUTTON_CLASS, BUTTON_GROUP_TEST_ID, CLOSE_BUTTON_CLASS, CONTENT_CLASS, CONTENT_TEST_ID, HEADER_CLASS, HEADER_TEXT_TEST_ID, IMAGE_CONTAINER_CLASS, IMAGE_CONTAINER_TEST_ID, MESSAGE_LAYOUT_TEST_ID, PRIMARY_BUTTON_TEST_ID, SECONDARY_BUTTON_TEST_ID, TEXT_CONTAINER_CLASS, TEXT_CONTAINER_TEST_ID };

package/dist/esm/components/InAppMessaging/MessageLayout/utils.mjs

@@ -1 +1,22 @@
-import r from"tinycolor2";const o=(o,t="light")=>{const{backgroundColor:n}=null!=o?o:{};if(!n)return t;return r(n).isDark()?"dark":"light"};export{o as getButtonModifier};
+import tinycolor from 'tinycolor2';
+
+/**
+ * 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(backgroundColor);
+    return color.isDark() ? 'dark' : 'light';
+};
+
+export { getButtonModifier };

package/dist/esm/components/InAppMessaging/ModalMessage/ModalMessage.mjs

@@ -1 +1,23 @@
-import*as s from"react";import e from"classnames";import{useBreakpointValue as a,Flex as o}from"@aws-amplify/ui-react";import"../hooks/useMessageImage/useMessageImage.mjs";import t from"../hooks/useMessageProps/useMessageProps.mjs";import{MessageLayout as m}from"../MessageLayout/MessageLayout.mjs";import{BLOCK_CLASS as r,DIALOG_CLASS as l}from"./constants.mjs";function i(i){const n=t(i),g=a([!0,!0,!1]),{shouldRenderMessage:p,styles:c}=n;return p?s.createElement(o,{className:r},s.createElement(o,{className:e(l,{[`${l}--full-width`]:g}),role:"dialog",testId:"inappmessaging-modal-dialog"},s.createElement(m,Object.assign({},i,n,{styles:c})))):null}export{i as ModalMessage};
+import * as React from 'react';
+import { classNames } from '@aws-amplify/ui';
+import { useBreakpointValue, Flex } from '@aws-amplify/ui-react';
+import '../hooks/useMessageImage/useMessageImage.mjs';
+import useMessageProps from '../hooks/useMessageProps/useMessageProps.mjs';
+import { MessageLayout } from '../MessageLayout/MessageLayout.mjs';
+import { BLOCK_CLASS, DIALOG_CLASS } from './constants.mjs';
+
+function ModalMessage(props) {
+    const messageProps = useMessageProps(props);
+    const shouldBeFullWidth = useBreakpointValue([true, true, false]);
+    const { shouldRenderMessage, styles } = messageProps;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    return (React.createElement(Flex, { className: BLOCK_CLASS },
+        React.createElement(Flex, { className: classNames(DIALOG_CLASS, {
+                [`${DIALOG_CLASS}--full-width`]: shouldBeFullWidth,
+            }), role: "dialog", testId: "inappmessaging-modal-dialog" },
+            React.createElement(MessageLayout, { ...props, ...messageProps, styles: styles }))));
+}
+
+export { ModalMessage };

package/dist/esm/components/InAppMessaging/ModalMessage/constants.mjs

@@ -1 +1,6 @@
-const a="amplify-inappmessaging-modalmessage",s=`${a}__dialog`;export{a as BLOCK_CLASS,s as DIALOG_CLASS};
+// Base block class for ModalMessage
+const BLOCK_CLASS = 'amplify-inappmessaging-modalmessage';
+// Element classes for ModalMessage
+const DIALOG_CLASS = `${BLOCK_CLASS}__dialog`;
+
+export { BLOCK_CLASS, DIALOG_CLASS };

package/dist/esm/components/InAppMessaging/hooks/useMessageImage/types.mjs

@@ -1 +1,9 @@
-var e;!function(e){e.Aborted="ABORTED",e.Failure="FAILURE",e.Fetching="FETCHING",e.Success="SUCCESS"}(e||(e={}));export{e as ImagePrefetchStatus};
+var ImagePrefetchStatus;
+(function (ImagePrefetchStatus) {
+    ImagePrefetchStatus["Aborted"] = "ABORTED";
+    ImagePrefetchStatus["Failure"] = "FAILURE";
+    ImagePrefetchStatus["Fetching"] = "FETCHING";
+    ImagePrefetchStatus["Success"] = "SUCCESS";
+})(ImagePrefetchStatus || (ImagePrefetchStatus = {}));
+
+export { ImagePrefetchStatus };

package/dist/esm/components/InAppMessaging/hooks/useMessageImage/useMessageImage.mjs

@@ -1 +1,40 @@
-import{useState as e,useEffect as r}from"react";import{ConsoleLogger as o}from"@aws-amplify/core";import{ImagePrefetchStatus as t}from"./types.mjs";const a=new o("Notifications.InAppMessaging");function n(o){const{src:n}=null!=o?o:{},s=!!n,[c,i]=e(s?t.Fetching:null),m=c===t.Fetching,l=c===t.Success;return r((()=>{if(!s)return;const e=new Image;e.onload=()=>{i(t.Success)},e.onabort=()=>{a.error(`Image load aborted: ${n}`),i(t.Aborted)},e.onerror=()=>{a.error(`Image failed to load: ${n}`),i(t.Failure)},e.src=n}),[s,n]),{hasRenderableImage:l,isImageFetching:m}}export{n as default};
+import { useState, useEffect } from 'react';
+import { ConsoleLogger } from 'aws-amplify/utils';
+import { ImagePrefetchStatus } from './types.mjs';
+
+const logger = new 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] = useState(shouldPrefetch ? ImagePrefetchStatus.Fetching : null);
+    const isImageFetching = prefetchStatus === ImagePrefetchStatus.Fetching;
+    const hasRenderableImage = prefetchStatus === ImagePrefetchStatus.Success;
+    useEffect(() => {
+        if (!shouldPrefetch) {
+            return;
+        }
+        const img = new Image();
+        img.onload = () => {
+            setPrefetchStatus(ImagePrefetchStatus.Success);
+        };
+        img.onabort = () => {
+            logger.error(`Image load aborted: ${src}`);
+            setPrefetchStatus(ImagePrefetchStatus.Aborted);
+        };
+        img.onerror = () => {
+            logger.error(`Image failed to load: ${src}`);
+            setPrefetchStatus(ImagePrefetchStatus.Failure);
+        };
+        img.src = src;
+    }, [shouldPrefetch, src]);
+    return { hasRenderableImage, isImageFetching };
+}
+
+export { useMessageImage as default };

package/dist/esm/components/InAppMessaging/hooks/useMessageProps/useMessageProps.mjs

@@ -1 +1,33 @@
-import{useRef as e,useEffect as s,useMemo as a}from"react";import r from"../useMessageImage/useMessageImage.mjs";import{getMessageStyles as t,getPayloadStyle as m}from"./utils.mjs";function l(l){const{image:o,onDisplay:n}=l,g=e(!1),{hasRenderableImage:i,isImageFetching:u}=r(o),c=!u;s((()=>{!g.current&&c&&(null==n||n(),g.current=!0)}),[n,c]);const d=a((()=>t({styleParams:{payloadStyle:m(l),overrideStyle:l.style}})),[l]);return{hasRenderableImage:i,shouldRenderMessage:c,styles:d}}export{l as default};
+import { useRef, useEffect, useMemo } from 'react';
+import useMessageImage from '../useMessageImage/useMessageImage.mjs';
+import { getMessageStyles, getPayloadStyle } from './utils.mjs';
+
+/**
+ * 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 = useRef(false);
+    const { hasRenderableImage, isImageFetching } = useMessageImage(image);
+    const shouldRenderMessage = !isImageFetching;
+    useEffect(() => {
+        if (!hasDisplayed.current && shouldRenderMessage) {
+            onDisplay?.();
+            hasDisplayed.current = true;
+        }
+    }, [onDisplay, shouldRenderMessage]);
+    const styles = useMemo(() => getMessageStyles({
+        styleParams: {
+            payloadStyle: getPayloadStyle(props),
+            overrideStyle: props.style,
+        },
+    }), [props]);
+    return { hasRenderableImage, shouldRenderMessage, styles };
+}
+
+export { useMessageProps as default };

package/dist/esm/components/InAppMessaging/hooks/useMessageProps/utils.mjs

@@ -1 +1,62 @@
-const n=({body:n,container:o,header:l,primaryButton:t,secondaryButton:i})=>{var e,d,u,a,s;return{body:null!==(e=null==n?void 0:n.style)&&void 0!==e?e:{},container:null!==(d=null==o?void 0:o.style)&&void 0!==d?d:{},header:null!==(u=null==l?void 0:l.style)&&void 0!==u?u:{},primaryButton:null!==(a=null==t?void 0:t.style)&&void 0!==a?a:{},secondaryButton:null!==(s=null==i?void 0:i.style)&&void 0!==s?s:{}}};function o({styleParams:n}){var o,l;const{payloadStyle:t,overrideStyle:i}=n;return{body:Object.assign(Object.assign({},null==t?void 0:t.body),null==i?void 0:i.body),closeIconButton:null!==(o=null==i?void 0:i.closeIconButton)&&void 0!==o?o:{},container:Object.assign(Object.assign({},null==t?void 0:t.container),null==i?void 0:i.container),header:Object.assign(Object.assign({},null==t?void 0:t.header),null==i?void 0:i.header),image:null!==(l=null==i?void 0:i.image)&&void 0!==l?l:{},primaryButton:Object.assign(Object.assign({},null==t?void 0:t.primaryButton),null==i?void 0:i.primaryButton),secondaryButton:Object.assign(Object.assign({},null==t?void 0:t.secondaryButton),null==i?void 0:i.secondaryButton)}}export{o as getMessageStyles,n as getPayloadStyle};
+/**
+ * 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,
+        },
+    };
+}
+
+export { getMessageStyles, getPayloadStyle };

package/dist/esm/components/InAppMessaging/withInAppMessaging/withInAppMessaging.mjs

@@ -1 +1,13 @@
-import e from"react";import{InAppMessagingProvider as t}from"@aws-amplify/ui-react-core-notifications";import r from"../InAppMessageDisplay/InAppMessageDisplay.mjs";function a(a,n){return function(i){return e.createElement(t,null,e.createElement(r,Object.assign({},n)),e.createElement(a,Object.assign({},i)))}}export{a as default};
+import React__default from 'react';
+import { InAppMessagingProvider } from '@aws-amplify/ui-react-core-notifications';
+import InAppMessageDisplay from '../InAppMessageDisplay/InAppMessageDisplay.mjs';
+
+function withInAppMessaging(Component, options) {
+    return function WrappedWithInAppMessaging(props) {
+        return (React__default.createElement(InAppMessagingProvider, null,
+            React__default.createElement(InAppMessageDisplay, { ...options }),
+            React__default.createElement(Component, { ...props })));
+    };
+}
+
+export { withInAppMessaging as default };

package/dist/esm/index.mjs

@@ -1 +1,3 @@
-export{InAppMessagingProvider,useInAppMessaging}from"@aws-amplify/ui-react-core-notifications";export{default as InAppMessageDisplay}from"./components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.mjs";export{default as withInAppMessaging}from"./components/InAppMessaging/withInAppMessaging/withInAppMessaging.mjs";
+export { InAppMessagingProvider, useInAppMessaging } from '@aws-amplify/ui-react-core-notifications';
+export { default as InAppMessageDisplay } from './components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.mjs';
+export { default as withInAppMessaging } from './components/InAppMessaging/withInAppMessaging/withInAppMessaging.mjs';

package/dist/esm/version.mjs

@@ -0,0 +1,3 @@
+const VERSION = '1.0.13';
+
+export { VERSION };