@aws-amplify/ui-react-notifications 0.0.0-studio-e5b8195-20230912200241 → 0.0.0-studio-console-80bb2e2-20230921222703

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/esm/components/InAppMessaging/Backdrop/Backdrop.mjs +1 -0
  2. package/dist/esm/components/InAppMessaging/Backdrop/withBackdrop.mjs +1 -0
  3. package/dist/esm/components/InAppMessaging/BannerMessage/BannerMessage.mjs +1 -0
  4. package/dist/esm/components/InAppMessaging/CloseIconButton/CloseIconButton.mjs +1 -0
  5. package/dist/esm/components/InAppMessaging/FullScreenMessage/FullScreenMessage.mjs +1 -0
  6. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.mjs +1 -0
  7. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/handleMessageLinkAction.mjs +1 -0
  8. package/dist/esm/components/InAppMessaging/MessageLayout/MessageLayout.mjs +1 -0
  9. package/dist/esm/components/InAppMessaging/MessageLayout/utils.mjs +1 -0
  10. package/dist/esm/components/InAppMessaging/ModalMessage/ModalMessage.mjs +1 -0
  11. package/dist/esm/components/InAppMessaging/hooks/useMessageImage/useMessageImage.mjs +1 -0
  12. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/useMessageProps.mjs +1 -0
  13. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/utils.mjs +1 -0
  14. package/dist/esm/components/InAppMessaging/withInAppMessaging/withInAppMessaging.mjs +1 -0
  15. package/dist/esm/{index.js → index.mjs} +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/styles.css +52 -387
  18. package/package.json +8 -9
  19. package/dist/esm/components/InAppMessaging/Backdrop/Backdrop.js +0 -1
  20. package/dist/esm/components/InAppMessaging/Backdrop/withBackdrop.js +0 -1
  21. package/dist/esm/components/InAppMessaging/BannerMessage/BannerMessage.js +0 -1
  22. package/dist/esm/components/InAppMessaging/CloseIconButton/CloseIconButton.js +0 -1
  23. package/dist/esm/components/InAppMessaging/FullScreenMessage/FullScreenMessage.js +0 -1
  24. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.js +0 -1
  25. package/dist/esm/components/InAppMessaging/InAppMessageDisplay/handleMessageLinkAction.js +0 -1
  26. package/dist/esm/components/InAppMessaging/MessageLayout/MessageLayout.js +0 -1
  27. package/dist/esm/components/InAppMessaging/MessageLayout/utils.js +0 -1
  28. package/dist/esm/components/InAppMessaging/ModalMessage/ModalMessage.js +0 -1
  29. package/dist/esm/components/InAppMessaging/hooks/useMessageImage/useMessageImage.js +0 -1
  30. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/useMessageProps.js +0 -1
  31. package/dist/esm/components/InAppMessaging/hooks/useMessageProps/utils.js +0 -1
  32. package/dist/esm/components/InAppMessaging/withInAppMessaging/withInAppMessaging.js +0 -1
  33. package/dist/esm/node_modules/tslib/tslib.es6.js +0 -1
  34. /package/dist/esm/components/InAppMessaging/BannerMessage/{constants.js → constants.mjs} +0 -0
  35. /package/dist/esm/components/InAppMessaging/FullScreenMessage/{constants.js → constants.mjs} +0 -0
  36. /package/dist/esm/components/InAppMessaging/MessageLayout/{constants.js → constants.mjs} +0 -0
  37. /package/dist/esm/components/InAppMessaging/ModalMessage/{constants.js → constants.mjs} +0 -0
  38. /package/dist/esm/components/InAppMessaging/hooks/useMessageImage/{types.js → types.mjs} +0 -0
@@ -0,0 +1 @@
1
+ import a from"react";import{View as i}from"@aws-amplify/ui-react";const t="inappmessaging-backdrop";function e({onClick:e,...r}){return a.createElement(i,{className:"amplify-inappmessaging-backdrop","data-testid":t,onClick:e,...r})}export{t as BACKDROP_TEST_ID,e as Backdrop};
@@ -0,0 +1 @@
1
+ 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,{...m}),e.createElement(t,{className:"amplify-inappmessaging-backdrop-content-container"},e.createElement(a,{className:"amplify-inappmessaging-backdrop-content"},e.createElement(r,{...c}))))}}export{r as withBackdrop};
@@ -0,0 +1 @@
1
+ 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 r from"../hooks/useMessageProps/useMessageProps.mjs";import{MessageLayout as a}from"../MessageLayout/MessageLayout.mjs";import{BLOCK_CLASS as m}from"./constants.mjs";function i(i){const n=r(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(a,{...i,...n,orientation:"horizontal",buttonSize:"small",styles:p}))}export{i as BannerMessage};
@@ -0,0 +1 @@
1
+ import*as e from"react";import{Button as a}from"@aws-amplify/ui-react";import{IconClose as i}from"@aws-amplify/ui-react/internal";function r({className:r,dismissButtonLabel:t="Dismiss message",onClick:s,style:m,...l}){return e.createElement(a,{ariaLabel:t,className:r,onClick:s,style:m,variation:"link",...l},e.createElement(i,{"aria-hidden":"true",size:"1.5rem"}))}export{r as CloseIconButton};
@@ -0,0 +1 @@
1
+ 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 l}from"./constants.mjs";function n(n){const i=a(n),c=o([!0,!0,!1]),{shouldRenderMessage:u,styles:p}=i,{onClose:f}=n;if(!u)return null;const g=()=>e.createElement(r,{className:s(l,{[`${l}--fullscreen`]:c}),role:"dialog",testId:"inappmessaging-fullscreen-dialog"},e.createElement(m,{...n,...i,styles:p}));if(c)return e.createElement(g,null);const d=t(g,{onClick:f});return e.createElement(d,null)}export{n as FullScreenMessage};
@@ -0,0 +1 @@
1
+ import e from"react";import{useMessage as s,handleMessageAction as o}from"@aws-amplify/ui-react-core-notifications";import{ThemeProvider as a}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 l from"./handleMessageLinkAction.mjs";function m(e){return null}const i={BannerMessage:n,CarouselMessage:m,FullScreenMessage:r,ModalMessage:t},c=({action:e,url:s})=>{o({action:e,url:s,handleMessageLinkAction:l})};function M({components:o}){const n=e.useMemo((()=>({...i,...o})),[o]),{Component:r,props:t}=s({components:n,onMessageAction:c});return e.createElement(a,{colorMode:"light"},e.createElement(r,{...t}))}M.BannerMessage=n,M.CarouselMessage=m,M.FullScreenMessage=r,M.ModalMessage=t;export{M as default};
@@ -0,0 +1 @@
1
+ import{ConsoleLogger as o}from"@aws-amplify/core";const t=new o("Notifications.InAppMessaging"),r=o=>{let r;try{r=new URL(o)}catch{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};
@@ -0,0 +1 @@
1
+ import*as e from"react";import t from"classnames";import{isEmpty as a}from"@aws-amplify/ui";import{Flex as s,Image as n,Heading as o,Text as r,ButtonGroup as m,Button as c}from"@aws-amplify/ui-react";import{CloseIconButton as l}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 b,SECONDARY_BUTTON_TEST_ID as h,PRIMARY_BUTTON_TEST_ID as j}from"./constants.mjs";import{getButtonModifier as k}from"./utils.mjs";const x=e=>!a(e);function z({body:a,buttonSize:z,hasRenderableImage:A,header:v,image:w,onClose:M,orientation:R="vertical",primaryButton:S,secondaryButton:T,styles:q}){const D=e.useMemo((()=>({primary:k(q.primaryButton),secondary:k(q.secondaryButton)})),[q]),F="horizontal"===R,G=e.createElement(l,{className:i,onClick:M,style:q.closeIconButton}),H=x(S),J=x(T),K=H||J;return e.createElement(s,{className:d,"data-testid":y,style:q.container},!F&&e.createElement(s,{justifyContent:"flex-end"},G),e.createElement(s,{className:t(u,`${u}--${R}`),"data-testid":p},A&&e.createElement(s,{className:t(f,`${f}--${R}`),"data-testid":E},e.createElement(n,{alt:"In-App Message Image",src:w?.src,style:q.image})),e.createElement(s,{className:t(I,`${I}--${R}`),"data-testid":$},v?.content&&e.createElement(o,{className:B,isTruncated:!0,level:2,style:q.header,testId:N},v.content),a?.content&&e.createElement(r,{style:q.body,testId:C},a.content)),F&&e.createElement(s,{alignItems:"flex-start"},G)),K&&e.createElement(m,{size:z,testId:g},J&&e.createElement(c,{className:t(b,`${b}--${D.secondary}`),onClick:T.onAction,style:q.secondaryButton,testId:h},T.title),H&&e.createElement(c,{className:t(b,`${b}--${D.primary}`),onClick:S.onAction,style:q.primaryButton,testId:j},S.title)))}export{z as MessageLayout};
@@ -0,0 +1 @@
1
+ import r from"tinycolor2";const o=(o,t="light")=>{const{backgroundColor:i}=o??{};if(!i)return t;return r(i).isDark()?"dark":"light"};export{o as getButtonModifier};
@@ -0,0 +1 @@
1
+ import*as e from"react";import s from"classnames";import{useBreakpointValue as a,Flex as o}from"@aws-amplify/ui-react";import"../hooks/useMessageImage/useMessageImage.mjs";import m from"../hooks/useMessageProps/useMessageProps.mjs";import{MessageLayout as t}from"../MessageLayout/MessageLayout.mjs";import{BLOCK_CLASS as r,DIALOG_CLASS as l}from"./constants.mjs";function i(i){const n=m(i),g=a([!0,!0,!1]),{shouldRenderMessage:p,styles:u}=n;return p?e.createElement(o,{className:r},e.createElement(o,{className:s(l,{[`${l}--full-width`]:g}),role:"dialog",testId:"inappmessaging-modal-dialog"},e.createElement(t,{...i,...n,styles:u}))):null}export{i as ModalMessage};
@@ -0,0 +1 @@
1
+ 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}=o??{},s=!!n,[c,i]=e(s?t.Fetching:null),m=c===t.Fetching,g=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:g,isImageFetching:m}}export{n as default};
@@ -0,0 +1 @@
1
+ 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 o(o){const{image:l,onDisplay:n}=o,g=e(!1),{hasRenderableImage:i,isImageFetching:u}=r(l),c=!u;s((()=>{!g.current&&c&&(n?.(),g.current=!0)}),[n,c]);const d=a((()=>t({styleParams:{payloadStyle:m(o),overrideStyle:o.style}})),[o]);return{hasRenderableImage:i,shouldRenderMessage:c,styles:d}}export{o as default};
@@ -0,0 +1 @@
1
+ const t=({body:t,container:o,header:e,primaryButton:n,secondaryButton:r})=>({body:t?.style??{},container:o?.style??{},header:e?.style??{},primaryButton:n?.style??{},secondaryButton:r?.style??{}});function o({styleParams:t}){const{payloadStyle:o,overrideStyle:e}=t;return{body:{...o?.body,...e?.body},closeIconButton:e?.closeIconButton??{},container:{...o?.container,...e?.container},header:{...o?.header,...e?.header},image:e?.image??{},primaryButton:{...o?.primaryButton,...e?.primaryButton},secondaryButton:{...o?.secondaryButton,...e?.secondaryButton}}}export{o as getMessageStyles,t as getPayloadStyle};
@@ -0,0 +1 @@
1
+ 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,{...n}),e.createElement(a,{...i}))}}export{a as default};
@@ -1 +1 @@
1
- export{InAppMessagingProvider,useInAppMessaging}from"@aws-amplify/ui-react-core-notifications";export{default as InAppMessageDisplay}from"./components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.js";export{default as withInAppMessaging}from"./components/InAppMessaging/withInAppMessaging/withInAppMessaging.js";
1
+ 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/index.js CHANGED
@@ -1 +1 @@
1
- "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)))}};
1
+ "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"),r=require("@aws-amplify/ui"),o=require("@aws-amplify/ui-react/internal"),l=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,m=c(t),d=i(t),g=i(a),p=i(l);!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})=>({body:e?.style??{},container:t?.style??{},header:n?.style??{},primaryButton:a?.style??{},secondaryButton:s?.style??{}});function b(e){const{image:n,onDisplay:a}=e,s=t.useRef(!1),{hasRenderableImage:r,isImageFetching:o}=function(e){const{src:n}=e??{},a=!!n,[s,r]=t.useState(a?u.Fetching:null),o=s===u.Fetching,l=s===u.Success;return t.useEffect((()=>{if(!a)return;const e=new Image;e.onload=()=>{r(u.Success)},e.onabort=()=>{y.error(`Image load aborted: ${n}`),r(u.Aborted)},e.onerror=()=>{y.error(`Image failed to load: ${n}`),r(u.Failure)},e.src=n}),[a,n]),{hasRenderableImage:l,isImageFetching:o}}(n),l=!o;t.useEffect((()=>{!s.current&&l&&(a?.(),s.current=!0)}),[a,l]);const i=t.useMemo((()=>function({styleParams:e}){const{payloadStyle:t,overrideStyle:n}=e;return{body:{...t?.body,...n?.body},closeIconButton:n?.closeIconButton??{},container:{...t?.container,...n?.container},header:{...t?.header,...n?.header},image:n?.image??{},primaryButton:{...t?.primaryButton,...n?.primaryButton},secondaryButton:{...t?.secondaryButton,...n?.secondaryButton}}}({styleParams:{payloadStyle:f(e),overrideStyle:e.style}})),[e]);return{hasRenderableImage:r,shouldRenderMessage:l,styles:i}}function E({className:e,dismissButtonLabel:t="Dismiss message",onClick:a,style:s,...r}){return m.createElement(n.Button,{ariaLabel:t,className:e,onClick:a,style:s,variation:"link",...r},m.createElement(o.IconClose,{"aria-hidden":"true",size:"1.5rem"}))}const h="amplify-inappmessaging-messagelayout",I=`${h}__button`,M=`${h}__close-button`,B=`${h}__content`,$=`${h}__header`,x=`${h}__image-container`,F=`${h}__text-container`,k="inappmessaging-messagelayout-bodytext",C="inappmessaging-messagelayout-buttongroup",N="inappmessaging-messagelayout-content",w="inappmessaging-messagelayout-headertext",A="inappmessaging-messagelayout-imagecontainer",_="inappmessaging-messagelayout",v="inappmessaging-messagelayout-primarybutton",S="inappmessaging-messagelayout-secondarybutton",R="inappmessaging-messagelayout-textcontainer",P=(e,t="light")=>{const{backgroundColor:n}=e??{};if(!n)return t;return p.default(n).isDark()?"dark":"light"},j=e=>!r.isEmpty(e);function O({body:e,buttonSize:t,hasRenderableImage:a,header:s,image:r,onClose:o,orientation:l="vertical",primaryButton:i,secondaryButton:c,styles:u}){const d=m.useMemo((()=>({primary:P(u.primaryButton),secondary:P(u.secondaryButton)})),[u]),p="horizontal"===l,y=m.createElement(E,{className:M,onClick:o,style:u.closeIconButton}),f=j(i),b=j(c),O=f||b;return m.createElement(n.Flex,{className:h,"data-testid":_,style:u.container},!p&&m.createElement(n.Flex,{justifyContent:"flex-end"},y),m.createElement(n.Flex,{className:g.default(B,`${B}--${l}`),"data-testid":N},a&&m.createElement(n.Flex,{className:g.default(x,`${x}--${l}`),"data-testid":A},m.createElement(n.Image,{alt:"In-App Message Image",src:r?.src,style:u.image})),m.createElement(n.Flex,{className:g.default(F,`${F}--${l}`),"data-testid":R},s?.content&&m.createElement(n.Heading,{className:$,isTruncated:!0,level:2,style:u.header,testId:w},s.content),e?.content&&m.createElement(n.Text,{style:u.body,testId:k},e.content)),p&&m.createElement(n.Flex,{alignItems:"flex-start"},y)),O&&m.createElement(n.ButtonGroup,{size:t,testId:C},b&&m.createElement(n.Button,{className:g.default(I,`${I}--${d.secondary}`),onClick:c.onAction,style:u.secondaryButton,testId:S},c.title),f&&m.createElement(n.Button,{className:g.default(I,`${I}--${d.primary}`),onClick:i.onAction,style:u.primaryButton,testId:v},i.title)))}const q="amplify-inappmessaging-bannermessage";function z(e){const t=b(e),a=n.useBreakpointValue([!0,!0,!1]),{shouldRenderMessage:s,styles:r}=t;if(!s)return null;const{alignment:o="right",position:l="top"}=e,i="center"===o&&"middle"===l;return d.default.createElement(n.Flex,{className:g.default(q,{[`${q}--${l}`]:!i,[`${q}--${o}`]:!i,[`${q}--center-middle`]:i,[`${q}--full-width`]:a}),role:"dialog",testId:`inappmessaging-${l}banner-dialog`},d.default.createElement(O,{...e,...t,orientation:"horizontal",buttonSize:"small",styles:r}))}const L="inappmessaging-backdrop";function D({onClick:e,...t}){return d.default.createElement(n.View,{className:"amplify-inappmessaging-backdrop","data-testid":L,onClick:e,...t})}const T="amplify-inappmessaging-fullscreenmessage";function U(e){const t=b(e),a=n.useBreakpointValue([!0,!0,!1]),{shouldRenderMessage:s,styles:r}=t,{onClose:o}=e;if(!s)return null;const l=()=>m.createElement(n.Flex,{className:g.default(T,{[`${T}--fullscreen`]:a}),role:"dialog",testId:"inappmessaging-fullscreen-dialog"},m.createElement(O,{...e,...t,styles:r}));if(a)return m.createElement(l,null);const i=function(e,t={}){return function(a){return d.default.createElement(d.default.Fragment,null,d.default.createElement(D,{...t}),d.default.createElement(n.Flex,{className:"amplify-inappmessaging-backdrop-content-container"},d.default.createElement(n.View,{className:"amplify-inappmessaging-backdrop-content"},d.default.createElement(e,{...a}))))}}(l,{onClick:o});return m.createElement(i,null)}const V="amplify-inappmessaging-modalmessage",G=`${V}__dialog`;function H(e){const t=b(e),a=n.useBreakpointValue([!0,!0,!1]),{shouldRenderMessage:s,styles:r}=t;return s?m.createElement(n.Flex,{className:V},m.createElement(n.Flex,{className:g.default(G,{[`${G}--full-width`]:a}),role:"dialog",testId:"inappmessaging-modal-dialog"},m.createElement(O,{...e,...t,styles:r}))):null}const J=new s.ConsoleLogger("Notifications.InAppMessaging"),K=e=>{let t;try{t=new URL(e)}catch{return void J.warn(`Unsupported url provided: ${e}`)}const{protocol:n}=t;"http:"===n||"https:"===n?window.open(e):J.warn(`Unsupported url protocol provided: ${n}`)};function Q(e){return null}const W={BannerMessage:z,CarouselMessage:Q,FullScreenMessage:U,ModalMessage:H},X=({action:t,url:n})=>{e.handleMessageAction({action:t,url:n,handleMessageLinkAction:K})};function Y({components:t}){const a=d.default.useMemo((()=>({...W,...t})),[t]),{Component:s,props:r}=e.useMessage({components:a,onMessageAction:X});return d.default.createElement(n.ThemeProvider,{colorMode:"light"},d.default.createElement(s,{...r}))}Y.BannerMessage=z,Y.CarouselMessage=Q,Y.FullScreenMessage=U,Y.ModalMessage=H,Object.defineProperty(exports,"InAppMessagingProvider",{enumerable:!0,get:function(){return e.InAppMessagingProvider}}),Object.defineProperty(exports,"useInAppMessaging",{enumerable:!0,get:function(){return e.useInAppMessaging}}),exports.InAppMessageDisplay=Y,exports.withInAppMessaging=function(t,n){return function(a){return d.default.createElement(e.InAppMessagingProvider,null,d.default.createElement(Y,{...n}),d.default.createElement(t,{...a}))}};
package/dist/styles.css CHANGED
@@ -677,70 +677,6 @@
677
677
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
678
678
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
679
679
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
680
- --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
681
- --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
682
- --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
683
- --amplify-components-fileuploader-dropzone-border-style: dashed;
684
- --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
685
- --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
686
- --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
687
- --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
688
- --amplify-components-fileuploader-dropzone-text-align: center;
689
- --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
690
- --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
691
- --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
692
- --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
693
- --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
694
- --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
695
- --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
696
- --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
697
- --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
698
- --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
699
- --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
700
- --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
701
- --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
702
- --amplify-components-fileuploader-file-border-style: solid;
703
- --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
704
- --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
705
- --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
706
- --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
707
- --amplify-components-fileuploader-file-align-items: baseline;
708
- --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
709
- --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
710
- --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
711
- --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
712
- --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
713
- --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
714
- --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
715
- --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
716
- --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
717
- --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
718
- --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
719
- --amplify-components-fileuploader-loader-stroke-linecap: round;
720
- --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
721
- --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
722
- --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
723
- --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
724
- --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
725
- --amplify-components-fileuploader-previewer-border-style: solid;
726
- --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
727
- --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
728
- --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
729
- --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
730
- --amplify-components-fileuploader-previewer-max-height: 40rem;
731
- --amplify-components-fileuploader-previewer-max-width: auto;
732
- --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
733
- --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
734
- --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
735
- --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
736
- --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
737
- --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
738
- --amplify-components-fileuploader-previewer-footer-border-color: var(--amplify-colors-border-secondary);
739
- --amplify-components-fileuploader-previewer-footer-border-style: solid;
740
- --amplify-components-fileuploader-previewer-footer-border-width: var(--amplify-border-widths-small);
741
- --amplify-components-fileuploader-previewer-footer-padding-block: var(--amplify-space-medium);
742
- --amplify-components-fileuploader-previewer-footer-padding-inline: var(--amplify-space-medium);
743
- --amplify-components-fileuploader-previewer-footer-justify-content: space-between;
744
680
  --amplify-components-flex-gap: var(--amplify-space-medium);
745
681
  --amplify-components-flex-justify-content: normal;
746
682
  --amplify-components-flex-align-items: stretch;
@@ -1000,7 +936,11 @@
1000
936
  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
1001
937
  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
1002
938
  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
939
+ --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
940
+ --amplify-components-select-background-color: var(--amplify-colors-background-primary);
1003
941
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
942
+ --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
943
+ --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
1004
944
  --amplify-components-select-wrapper-flex: 1;
1005
945
  --amplify-components-select-wrapper-display: block;
1006
946
  --amplify-components-select-wrapper-position: relative;
@@ -1013,15 +953,20 @@
1013
953
  --amplify-components-select-icon-wrapper-pointer-events: none;
1014
954
  --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
1015
955
  --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
1016
- --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
956
+ --amplify-components-select-option-background-color: transparent;
1017
957
  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
1018
958
  --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
959
+ --amplify-components-select-option-disabled-background-color: transparent;
1019
960
  --amplify-components-select-white-space: nowrap;
1020
961
  --amplify-components-select-min-width: 6.5rem;
1021
962
  --amplify-components-select-small-min-width: 5.5rem;
1022
963
  --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
1023
964
  --amplify-components-select-large-min-width: 7.5rem;
1024
965
  --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
966
+ --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
967
+ --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
968
+ --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
969
+ --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
1025
970
  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
1026
971
  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
1027
972
  --amplify-components-selectfield-flex-direction: column;
@@ -1082,9 +1027,9 @@
1082
1027
  --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
1083
1028
  --amplify-components-storagemanager-dropzone-text-align: center;
1084
1029
  --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
1085
- --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
1030
+ --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius);
1086
1031
  --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
1087
- --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
1032
+ --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style);
1088
1033
  --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
1089
1034
  --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
1090
1035
  --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
@@ -1111,6 +1056,8 @@
1111
1056
  --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
1112
1057
  --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
1113
1058
  --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
1059
+ --amplify-components-storagemanager-filelist-flex-direction: column;
1060
+ --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1114
1061
  --amplify-components-storagemanager-loader-stroke-linecap: round;
1115
1062
  --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
1116
1063
  --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
@@ -1131,8 +1078,6 @@
1131
1078
  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
1132
1079
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1133
1080
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1134
- --amplify-components-storagemanager-filelist-flex-direction: column;
1135
- --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
1136
1081
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1137
1082
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1138
1083
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
@@ -2939,12 +2884,6 @@ strong.amplify-text {
2939
2884
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
2940
2885
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
2941
2886
  }
2942
- .amplify-input[disabled] {
2943
- color: var(--amplify-components-fieldcontrol-disabled-color);
2944
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2945
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2946
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2947
- }
2948
2887
  .amplify-input--quiet {
2949
2888
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2950
2889
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -2961,6 +2900,12 @@ strong.amplify-text {
2961
2900
  .amplify-input--quiet[aria-invalid=true]:focus {
2962
2901
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2963
2902
  }
2903
+ .amplify-input[disabled] {
2904
+ color: var(--amplify-components-fieldcontrol-disabled-color);
2905
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2906
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2907
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2908
+ }
2964
2909
 
2965
2910
  .amplify-textarea {
2966
2911
  box-sizing: border-box;
@@ -3011,12 +2956,6 @@ strong.amplify-text {
3011
2956
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
3012
2957
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
3013
2958
  }
3014
- .amplify-textarea[disabled] {
3015
- color: var(--amplify-components-fieldcontrol-disabled-color);
3016
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
3017
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
3018
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
3019
- }
3020
2959
  .amplify-textarea--quiet {
3021
2960
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3022
2961
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -3033,6 +2972,12 @@ strong.amplify-text {
3033
2972
  .amplify-textarea--quiet[aria-invalid=true]:focus {
3034
2973
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
3035
2974
  }
2975
+ .amplify-textarea[disabled] {
2976
+ color: var(--amplify-components-fieldcontrol-disabled-color);
2977
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
2978
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
2979
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
2980
+ }
3036
2981
 
3037
2982
  .amplify-image {
3038
2983
  height: var(--amplify-components-image-height);
@@ -4359,153 +4304,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
4359
4304
  border-radius: 2px;
4360
4305
  }
4361
4306
 
4362
- .amplify-fileuploader__dropzone {
4363
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
4364
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
4365
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
4366
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
4367
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
4368
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
4369
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
4370
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
4371
- display: flex;
4372
- flex-direction: column;
4373
- align-items: center;
4374
- gap: var(--amplify-components-fileuploader-dropzone-gap);
4375
- }
4376
- .amplify-fileuploader__dropzone--small {
4377
- flex-direction: row;
4378
- justify-content: center;
4379
- }
4380
- .amplify-fileuploader__dropzone--active {
4381
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
4382
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
4383
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
4384
- }
4385
- .amplify-fileuploader__dropzone__icon {
4386
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
4387
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
4388
- }
4389
- .amplify-fileuploader__dropzone__text {
4390
- color: var(--amplify-components-fileuploader-dropzone-text-color);
4391
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
4392
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
4393
- }
4394
- .amplify-fileuploader__file {
4395
- position: relative;
4396
- border-width: var(--amplify-components-fileuploader-file-border-width);
4397
- border-style: var(--amplify-components-fileuploader-file-border-style);
4398
- border-color: var(--amplify-components-fileuploader-file-border-color);
4399
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
4400
- display: flex;
4401
- flex-direction: column;
4402
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
4403
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
4404
- align-items: var(--amplify-components-fileuploader-file-align-items);
4405
- }
4406
- .amplify-fileuploader__file__wrapper {
4407
- width: 100%;
4408
- display: flex;
4409
- flex-direction: row;
4410
- align-items: center;
4411
- gap: var(--amplify-components-fileuploader-file-gap);
4412
- }
4413
- .amplify-fileuploader__file__name {
4414
- text-overflow: ellipsis;
4415
- overflow: hidden;
4416
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
4417
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
4418
- color: var(--amplify-components-fileuploader-file-name-color);
4419
- }
4420
- .amplify-fileuploader__file__size {
4421
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
4422
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4423
- color: var(--amplify-components-fileuploader-file-size-color);
4424
- }
4425
- .amplify-fileuploader__file__main {
4426
- flex: 1;
4427
- white-space: nowrap;
4428
- overflow: hidden;
4429
- }
4430
- .amplify-fileuploader__file__image {
4431
- position: relative;
4432
- display: flex;
4433
- align-items: center;
4434
- justify-content: center;
4435
- width: var(--amplify-components-fileuploader-file-image-width);
4436
- height: var(--amplify-components-fileuploader-file-image-height);
4437
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
4438
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
4439
- color: var(--amplify-components-fileuploader-file-image-color);
4440
- }
4441
- .amplify-fileuploader__file__image img {
4442
- max-height: 100%;
4443
- }
4444
- .amplify-fileuploader__file__status--error {
4445
- color: var(--amplify-colors-font-error);
4446
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
4447
- }
4448
- .amplify-fileuploader__file__status--success {
4449
- color: var(--amplify-colors-font-success);
4450
- }
4451
- .amplify-fileuploader__loader {
4452
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
4453
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
4454
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
4455
- height: var(--amplify-components-fileuploader-loader-stroke-width);
4456
- --amplify-components-loader-linear-stroke-filled: var(
4457
- --amplify-components-fileuploader-loader-stroke-filled
4458
- );
4459
- overflow: hidden;
4460
- position: absolute;
4461
- bottom: 0;
4462
- left: 0;
4463
- width: 100%;
4464
- }
4465
- .amplify-fileuploader__previewer {
4466
- display: block;
4467
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4468
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
4469
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
4470
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
4471
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
4472
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
4473
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
4474
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
4475
- }
4476
- .amplify-fileuploader__previewer__text {
4477
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
4478
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
4479
- color: var(--amplify-components-fileuploader-previewer-text-color);
4480
- }
4481
- .amplify-fileuploader__previewer__body {
4482
- display: flex;
4483
- flex-direction: column;
4484
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
4485
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4486
- overflow: auto;
4487
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
4488
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
4489
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
4490
- }
4491
- .amplify-fileuploader__previewer__footer {
4492
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
4493
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
4494
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
4495
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
4496
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
4497
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
4498
- position: relative;
4499
- display: flex;
4500
- flex-direction: row;
4501
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
4502
- }
4503
- .amplify-fileuploader__previewer__footer__actions {
4504
- display: flex;
4505
- flex-direction: row;
4506
- gap: var(--amplify-space-small);
4507
- }
4508
-
4509
4307
  .amplify-menu-content-wrapper {
4510
4308
  z-index: 999999;
4511
4309
  }
@@ -5040,6 +4838,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
5040
4838
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
5041
4839
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
5042
4840
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
4841
+ background-color: var(--amplify-components-select-background-color);
4842
+ color: var(--amplify-components-select-color);
5043
4843
  min-width: var(--amplify-components-select-min-width);
5044
4844
  padding-inline-end: var(--amplify-components-select-padding-inline-end);
5045
4845
  white-space: var(--amplify-components-select-white-space);
@@ -5069,12 +4869,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
5069
4869
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
5070
4870
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
5071
4871
  }
5072
- .amplify-select[disabled] {
5073
- color: var(--amplify-components-fieldcontrol-disabled-color);
5074
- cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
5075
- border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
5076
- background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
5077
- }
5078
4872
  .amplify-select--quiet {
5079
4873
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
5080
4874
  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -5091,17 +4885,28 @@ html[dir=rtl] .amplify-field-group__inner-start {
5091
4885
  .amplify-select--quiet[aria-invalid=true]:focus {
5092
4886
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
5093
4887
  }
4888
+ .amplify-select[disabled] {
4889
+ color: var(--amplify-components-fieldcontrol-disabled-color);
4890
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
4891
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
4892
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
4893
+ }
5094
4894
  .amplify-select option {
5095
- color: initial;
4895
+ background-color: var(--amplify-components-select-option-background-color);
4896
+ color: var(--amplify-components-select-option-color);
5096
4897
  }
5097
4898
  .amplify-select option[disabled=""] {
4899
+ background-color: var(--amplify-components-select-option-disabled-background-color);
5098
4900
  color: var(--amplify-components-select-option-disabled-color);
4901
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
5099
4902
  }
5100
- @-moz-document url-prefix() {
5101
- .amplify-select option {
5102
- background-color: var(--amplify-components-select-option-background-color);
5103
- color: var(--amplify-components-select-option-color);
5104
- }
4903
+ .amplify-select[disabled] {
4904
+ background-color: var(--amplify-components-select-disabled-background-color);
4905
+ color: var(--amplify-components-select-disabled-color);
4906
+ }
4907
+ .amplify-select[disabled] option {
4908
+ color: inherit;
4909
+ background-color: inherit;
5105
4910
  }
5106
4911
  .amplify-select--small {
5107
4912
  min-width: var(--amplify-components-select-small-min-width);
@@ -5111,6 +4916,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
5111
4916
  min-width: var(--amplify-components-select-large-min-width);
5112
4917
  padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
5113
4918
  }
4919
+ .amplify-select--expanded {
4920
+ overflow: auto;
4921
+ padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline);
4922
+ }
4923
+ .amplify-select--expanded option {
4924
+ padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline);
4925
+ }
5114
4926
 
5115
4927
  .amplify-selectfield {
5116
4928
  flex-direction: var(--amplify-components-selectfield-flex-direction);
@@ -6160,153 +5972,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
6160
5972
  margin: var(--amplify-space-small);
6161
5973
  }
6162
5974
 
6163
- .amplify-fileuploader__dropzone {
6164
- background-color: var(--amplify-components-fileuploader-dropzone-background-color);
6165
- border-color: var(--amplify-components-fileuploader-dropzone-border-color);
6166
- border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6167
- border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6168
- border-width: var(--amplify-components-fileuploader-dropzone-border-width);
6169
- text-align: var(--amplify-components-fileuploader-dropzone-text-align);
6170
- padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
6171
- padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
6172
- display: flex;
6173
- flex-direction: column;
6174
- align-items: center;
6175
- gap: var(--amplify-components-fileuploader-dropzone-gap);
6176
- }
6177
- .amplify-fileuploader__dropzone--small {
6178
- flex-direction: row;
6179
- justify-content: center;
6180
- }
6181
- .amplify-fileuploader__dropzone--active {
6182
- border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
6183
- border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
6184
- background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
6185
- }
6186
- .amplify-fileuploader__dropzone__icon {
6187
- font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
6188
- color: var(--amplify-components-fileuploader-dropzone-icon-color);
6189
- }
6190
- .amplify-fileuploader__dropzone__text {
6191
- color: var(--amplify-components-fileuploader-dropzone-text-color);
6192
- font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
6193
- font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
6194
- }
6195
- .amplify-fileuploader__file {
6196
- position: relative;
6197
- border-width: var(--amplify-components-fileuploader-file-border-width);
6198
- border-style: var(--amplify-components-fileuploader-file-border-style);
6199
- border-color: var(--amplify-components-fileuploader-file-border-color);
6200
- border-radius: var(--amplify-components-fileuploader-file-border-radius);
6201
- display: flex;
6202
- flex-direction: column;
6203
- padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
6204
- padding-block: var(--amplify-components-fileuploader-file-padding-block);
6205
- align-items: var(--amplify-components-fileuploader-file-align-items);
6206
- }
6207
- .amplify-fileuploader__file__wrapper {
6208
- width: 100%;
6209
- display: flex;
6210
- flex-direction: row;
6211
- align-items: center;
6212
- gap: var(--amplify-components-fileuploader-file-gap);
6213
- }
6214
- .amplify-fileuploader__file__name {
6215
- text-overflow: ellipsis;
6216
- overflow: hidden;
6217
- font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
6218
- font-size: var(--amplify-components-fileuploader-file-name-font-size);
6219
- color: var(--amplify-components-fileuploader-file-name-color);
6220
- }
6221
- .amplify-fileuploader__file__size {
6222
- font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
6223
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
6224
- color: var(--amplify-components-fileuploader-file-size-color);
6225
- }
6226
- .amplify-fileuploader__file__main {
6227
- flex: 1;
6228
- white-space: nowrap;
6229
- overflow: hidden;
6230
- }
6231
- .amplify-fileuploader__file__image {
6232
- position: relative;
6233
- display: flex;
6234
- align-items: center;
6235
- justify-content: center;
6236
- width: var(--amplify-components-fileuploader-file-image-width);
6237
- height: var(--amplify-components-fileuploader-file-image-height);
6238
- background-color: var(--amplify-components-fileuploader-file-image-background-color);
6239
- border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
6240
- color: var(--amplify-components-fileuploader-file-image-color);
6241
- }
6242
- .amplify-fileuploader__file__image img {
6243
- max-height: 100%;
6244
- }
6245
- .amplify-fileuploader__file__status--error {
6246
- color: var(--amplify-colors-font-error);
6247
- font-size: var(--amplify-components-fileuploader-file-size-font-size);
6248
- }
6249
- .amplify-fileuploader__file__status--success {
6250
- color: var(--amplify-colors-font-success);
6251
- }
6252
- .amplify-fileuploader__loader {
6253
- stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
6254
- stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
6255
- stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
6256
- height: var(--amplify-components-fileuploader-loader-stroke-width);
6257
- --amplify-components-loader-linear-stroke-filled: var(
6258
- --amplify-components-fileuploader-loader-stroke-filled
6259
- );
6260
- overflow: hidden;
6261
- position: absolute;
6262
- bottom: 0;
6263
- left: 0;
6264
- width: 100%;
6265
- }
6266
- .amplify-fileuploader__previewer {
6267
- display: block;
6268
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6269
- background-color: var(--amplify-components-fileuploader-previewer-background-color);
6270
- border-width: var(--amplify-components-fileuploader-previewer-border-width);
6271
- border-style: var(--amplify-components-fileuploader-previewer-border-style);
6272
- border-color: var(--amplify-components-fileuploader-previewer-border-color);
6273
- border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
6274
- padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
6275
- padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
6276
- }
6277
- .amplify-fileuploader__previewer__text {
6278
- font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
6279
- font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
6280
- color: var(--amplify-components-fileuploader-previewer-text-color);
6281
- }
6282
- .amplify-fileuploader__previewer__body {
6283
- display: flex;
6284
- flex-direction: column;
6285
- max-height: var(--amplify-components-fileuploader-previewer-max-height);
6286
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6287
- overflow: auto;
6288
- gap: var(--amplify-components-fileuploader-previewer-body-gap);
6289
- padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
6290
- padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
6291
- }
6292
- .amplify-fileuploader__previewer__footer {
6293
- max-width: var(--amplify-components-fileuploader-previewer-max-width);
6294
- border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
6295
- border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
6296
- border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
6297
- padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
6298
- padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
6299
- position: relative;
6300
- display: flex;
6301
- flex-direction: row;
6302
- justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
6303
- }
6304
- .amplify-fileuploader__previewer__footer__actions {
6305
- display: flex;
6306
- flex-direction: row;
6307
- gap: var(--amplify-space-small);
6308
- }
6309
-
6310
5975
  .amplify-storagemanager__dropzone {
6311
5976
  background-color: var(--amplify-components-storagemanager-dropzone-background-color);
6312
5977
  border-color: var(--amplify-components-storagemanager-dropzone-border-color);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-notifications",
3
- "version": "0.0.0-studio-e5b8195-20230912200241",
3
+ "version": "0.0.0-studio-console-80bb2e2-20230921222703",
4
4
  "main": "dist/index.js",
5
- "module": "dist/esm/index.js",
5
+ "module": "dist/esm/index.mjs",
6
6
  "exports": {
7
7
  ".": {
8
8
  "types": "./dist/types/index.d.ts",
9
- "import": "./dist/esm/index.js",
9
+ "import": "./dist/esm/index.mjs",
10
10
  "require": "./dist/index.js"
11
11
  },
12
12
  "./styles.css": "./dist/styles.css"
@@ -35,14 +35,14 @@
35
35
  "prebuild": "rimraf dist",
36
36
  "size": "yarn size-limit",
37
37
  "test": "jest",
38
- "test:ci": "yarn test",
38
+ "test:ci": "yarn test && yarn check:esm",
39
39
  "test:watch": "yarn test --watch",
40
40
  "typecheck": "tsc --noEmit"
41
41
  },
42
42
  "dependencies": {
43
- "@aws-amplify/ui": "0.0.0-studio-e5b8195-20230912200241",
44
- "@aws-amplify/ui-react": "0.0.0-studio-e5b8195-20230912200241",
45
- "@aws-amplify/ui-react-core-notifications": "0.0.0-studio-e5b8195-20230912200241",
43
+ "@aws-amplify/ui": "0.0.0-studio-console-80bb2e2-20230921222703",
44
+ "@aws-amplify/ui-react": "0.0.0-studio-console-80bb2e2-20230921222703",
45
+ "@aws-amplify/ui-react-core-notifications": "0.0.0-studio-console-80bb2e2-20230921222703",
46
46
  "classnames": "2.3.1",
47
47
  "tinycolor2": "1.4.2"
48
48
  },
@@ -53,7 +53,6 @@
53
53
  },
54
54
  "devDependencies": {
55
55
  "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
56
- "@rollup/plugin-commonjs": "^22.0.1",
57
56
  "@rollup/plugin-typescript": "^8.3.1",
58
57
  "@size-limit/preset-big-lib": "^8.2.6",
59
58
  "@testing-library/jest-dom": "^5.14.1",
@@ -82,7 +81,7 @@
82
81
  "size-limit": [
83
82
  {
84
83
  "name": "InAppMessaging",
85
- "path": "dist/esm/index.js",
84
+ "path": "dist/esm/index.mjs",
86
85
  "import": "{ InAppMessagingProvider, InAppMessageDisplay }",
87
86
  "limit": "110 kB"
88
87
  }
@@ -1 +0,0 @@
1
- import{__rest as a}from"../../../node_modules/tslib/tslib.es6.js";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};
@@ -1 +0,0 @@
1
- import e from"react";import{Flex as t,View as a}from"@aws-amplify/ui-react";import{Backdrop as n}from"./Backdrop.js";function r(r,c={}){return function(m){return e.createElement(e.Fragment,null,e.createElement(n,Object.assign({},c)),e.createElement(t,{className:"amplify-inappmessaging-backdrop-content-container"},e.createElement(a,{className:"amplify-inappmessaging-backdrop-content"},e.createElement(r,Object.assign({},m)))))}}export{r as withBackdrop};
@@ -1 +0,0 @@
1
- import e from"react";import s from"classnames";import{useBreakpointValue as t,Flex as o}from"@aws-amplify/ui-react";import"../hooks/useMessageImage/useMessageImage.js";import a from"../hooks/useMessageProps/useMessageProps.js";import{MessageLayout as r}from"../MessageLayout/MessageLayout.js";import{BLOCK_CLASS as i}from"./constants.js";function n(n){const m=a(n),l=t([!0,!0,!1]),{shouldRenderMessage:g,styles:p}=m;if(!g)return null;const{alignment:u="right",position:c="top"}=n,d="center"===u&&"middle"===c;return e.createElement(o,{className:s(i,{[`${i}--${c}`]:!d,[`${i}--${u}`]:!d,[`${i}--center-middle`]:d,[`${i}--full-width`]:l}),role:"dialog",testId:`inappmessaging-${c}banner-dialog`},e.createElement(r,Object.assign({},n,m,{orientation:"horizontal",buttonSize:"small",styles:p})))}export{n as BannerMessage};
@@ -1 +0,0 @@
1
- import{__rest as e}from"../../../node_modules/tslib/tslib.es6.js";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:l="Dismiss message",onClick:m,style:o}=t,n=e(t,["className","dismissButtonLabel","onClick","style"]);return s.createElement(a,Object.assign({ariaLabel:l,className:r,onClick:m,style:o,variation:"link"},n),s.createElement(i,{"aria-hidden":"true",size:"1.5rem"}))}export{t as CloseIconButton};
@@ -1 +0,0 @@
1
- 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.js";import"../hooks/useMessageImage/useMessageImage.js";import a from"../hooks/useMessageProps/useMessageProps.js";import{MessageLayout as n}from"../MessageLayout/MessageLayout.js";import{BLOCK_CLASS as l}from"./constants.js";function m(m){const i=a(m),c=o([!0,!0,!1]),{shouldRenderMessage:u,styles:p}=i,{onClose:g}=m;if(!u)return null;const f=()=>e.createElement(r,{className:s(l,{[`${l}--fullscreen`]:c}),role:"dialog",testId:"inappmessaging-fullscreen-dialog"},e.createElement(n,Object.assign({},m,i,{styles:p})));if(c)return e.createElement(f,null);const d=t(f,{onClick:g});return e.createElement(d,null)}export{m as FullScreenMessage};
@@ -1 +0,0 @@
1
- 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.js";import{FullScreenMessage as r}from"../FullScreenMessage/FullScreenMessage.js";import{ModalMessage as t}from"../ModalMessage/ModalMessage.js";import i from"./handleMessageLinkAction.js";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};
@@ -1 +0,0 @@
1
- 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};
@@ -1 +0,0 @@
1
- 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 c}from"@aws-amplify/ui-react";import{CloseIconButton as m}from"../CloseIconButton/CloseIconButton.js";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.js";import{getButtonModifier as j}from"./utils.js";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(m,{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(c,{className:t(v,`${v}--${D.secondary}`),onClick:T.onAction,style:q.secondaryButton,testId:b},T.title),H&&e.createElement(c,{className:t(v,`${v}--${D.primary}`),onClick:S.onAction,style:q.primaryButton,testId:h},S.title)))}export{x as MessageLayout};
@@ -1 +0,0 @@
1
- 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};
@@ -1 +0,0 @@
1
- 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.js";import t from"../hooks/useMessageProps/useMessageProps.js";import{MessageLayout as r}from"../MessageLayout/MessageLayout.js";import{BLOCK_CLASS as m,DIALOG_CLASS as l}from"./constants.js";function i(i){const n=t(i),g=a([!0,!0,!1]),{shouldRenderMessage:p,styles:c}=n;return p?s.createElement(o,{className:m},s.createElement(o,{className:e(l,{[`${l}--full-width`]:g}),role:"dialog",testId:"inappmessaging-modal-dialog"},s.createElement(r,Object.assign({},i,n,{styles:c})))):null}export{i as ModalMessage};
@@ -1 +0,0 @@
1
- import{useState as e,useEffect as r}from"react";import{ConsoleLogger as o}from"@aws-amplify/core";import{ImagePrefetchStatus as t}from"./types.js";const a=new o("Notifications.InAppMessaging");function n(o){const{src:n}=null!=o?o:{},s=!!n,[c,i]=e(s?t.Fetching:null),l=c===t.Fetching,m=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:m,isImageFetching:l}}export{n as default};
@@ -1 +0,0 @@
1
- import{useRef as e,useEffect as s,useMemo as a}from"react";import r from"../useMessageImage/useMessageImage.js";import{getMessageStyles as t,getPayloadStyle as l}from"./utils.js";function o(o){const{image:m,onDisplay:n}=o,g=e(!1),{hasRenderableImage:i,isImageFetching:u}=r(m),c=!u;s((()=>{!g.current&&c&&(null==n||n(),g.current=!0)}),[n,c]);const d=a((()=>t({styleParams:{payloadStyle:l(o),overrideStyle:o.style}})),[o]);return{hasRenderableImage:i,shouldRenderMessage:c,styles:d}}export{o as default};
@@ -1 +0,0 @@
1
- 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};
@@ -1 +0,0 @@
1
- import e from"react";import{InAppMessagingProvider as t}from"@aws-amplify/ui-react-core-notifications";import r from"../InAppMessageDisplay/InAppMessageDisplay.js";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};
@@ -1 +0,0 @@
1
- function e(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r}export{e as __rest};