@contentful/f36-notification - npm Package Compare versions

Comparing version 4.0.1-next-v4-6754.2279 to 4.0.1-next-v4-6763.2280

dist/main.js

@@ -1,2 +0,2 @@
-var e=require("react"),t=y(e),{useState:i,useCallback:n,Component:o}=e,{render:r}=require("react-dom"),{cx:a,css:s}=require("emotion"),{useAsyncState:l,Flex:c,Box:u}=require("@contentful/f36-core"),m=y(require("@babel/runtime/helpers/extends")),{CheckCircleIcon:d,ErrorCircleIcon:h,WarningIcon:p,CloseIcon:f}=require("@contentful/f36-icons"),{Button:g}=require("@contentful/f36-button"),{TextLink:v}=require("@contentful/f36-text-link"),{Heading:w,Paragraph:b}=require("@contentful/f36-typography"),S=y(require("@contentful/f36-tokens")),x=y(require("@babel/runtime/helpers/defineProperty")),E=y(require("react-animate-height"));function C(e,t,i,n){Object.defineProperty(e,t,{get:i,set:n,enumerable:!0,configurable:!0})}function y(e){return e&&e.__esModule?e.default:e}var M={};C(M,"Notification",(()=>j)),C(M,"NotificationItem",(()=>D)),C(M,"NotificationItemContainer",(()=>L)),C(M,"NotificationsManager",(()=>H));const N={positive:S.green600,negative:S.red600,warning:S.orange400},k=({variant:e})=>s({background:S.colorWhite,borderRadius:S.borderRadiusMedium,boxShadow:S.boxShadowHeavy,boxSizing:"border-box",display:"flex",overflow:"hidden",position:"relative",padding:S.spacingM,width:"100%","&:before":{backgroundColor:N[e],content:'""',height:"100%",left:0,position:"absolute",top:0,width:"2px"}},""),P=({variant:e})=>s({fill:N[e],marginRight:S.spacingM,alignItems:"flex-start"},""),q={fontSize:S.fontSizeM,lineHeight:S.lineHeightM,width:"100%"},T={color:S.gray800,fontSize:S.fontSizeL,lineHeight:S.lineHeightL},B={color:S.gray700,"&:last-child":{marginBottom:0}},I={marginBottom:`-${S.spacingXs}`,marginRight:`-${S.spacingXs}`,marginTop:`-${S.spacingXs}`},z=(e,i)=>{var n;const{className:o,children:r,cta:l,withCloseButton:S=!0,variant:x="positive",onClose:E,testId:C="cf-ui-notification",title:y,...M}=e,N=(({variant:e})=>({wrapper:k({variant:e}),icon:P({variant:e}),notification:s(q,""),title:s(T,""),content:s(B,""),closeButton:s(I,"")}))({variant:x}),z=y?"medium":"small",D={positive:t.createElement(d,{variant:x,size:z}),warning:t.createElement(p,{variant:x,size:z}),negative:t.createElement(h,{variant:x,size:z})};return t.createElement(c,m({"data-test-id":C,role:"alert","data-intent":{positive:"success",warning:"warning",negative:"error"}[x],"aria-live":"positive"===x?"polite":"assertive",className:a(N.wrapper,o)},M,{ref:i}),t.createElement(u,{className:a(N.icon)},D[x]),t.createElement(u,{className:a(N.notification)},y&&t.createElement(w,{as:"h2",className:a(N.title),marginBottom:"spacingXs"},y),r&&t.createElement(b,{className:N.content,marginBottom:"spacingXs"},r),(null==l?void 0:l.label)&&t.createElement(v,m({},null==l?void 0:l.textLinkProps,{as:(null==l||null===(n=l.textLinkProps)||void 0===n?void 0:n.as)||"button"}),l.label)),S&&t.createElement(u,null,t.createElement(g,{className:a(N.closeButton),variant:"transparent",icon:t.createElement(f,null),onClick:()=>{E&&E()},testId:"cf-ui-notification-close","aria-label":"Dismiss"})))},D=t.forwardRef(z);class L extends o{componentDidMount(){this.startTimer(),this.setState({isShown:!0})}componentDidUpdate(e){e.isShown!==this.props.isShown&&this.setState({isShown:this.props.isShown})}componentWillUnmount(){this.stopTimer()}render(){const{isShown:e,duration:i,...n}=this.props;return t.createElement(E,{duration:200,height:this.state.isShown?"auto":0,easing:"ease-in-out",animateOpacity:!0,onAnimationEnd:()=>{!1===this.state.isShown&&this.props.onClose&&this.props.onClose()}},t.createElement("div",{className:a(s({name:"uw7k7s",styles:"pointer-events:all;"})),onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},t.createElement(D,m({},n,{onClose:this.handleClose}))))}constructor(...e){super(...e),x(this,"timer",null),x(this,"state",{isShown:!1}),x(this,"startTimer",(()=>{if(this.props.duration){if(0===this.props.duration)return;this.timer=window.setTimeout((()=>{this.handleClose()}),this.props.duration)}})),x(this,"stopTimer",(()=>{0!==this.props.duration&&this.timer&&(clearTimeout(this.timer),this.timer=null)})),x(this,"handleClose",(()=>{this.stopTimer(),this.setState({isShown:!1})})),x(this,"handleMouseEnter",(()=>{this.stopTimer()})),x(this,"handleMouseLeave",(()=>{this.startTimer()}))}}x(L,"defaultProps",{isShown:!1});let A=0;function H({register:e}){const[o,r]=l([]),[c,u]=i("bottom"),[m,d]=i(20),[h,p]=i(6e3),f=((e,t)=>({manager:s({left:0,margin:"0 auto",maxWidth:"560px",position:"fixed",pointerEvents:"none",right:0,[e]:t,zIndex:S.zIndexNotification},""),container:s({display:"flex",flexDirection:"column",margin:"0 auto",maxWidth:"560px",minWidth:"360px","& > div":{marginBottom:"top"===e?0:S.spacingS,marginTop:"top"===e?S.spacingS:0}},"")}))(c,m),g=n(((e,t)=>{if("bottom"===e||"top"===e){const i=t&&t.offset?t.offset:20;u(e),d(i)}}),[]),v=n((e=>{r(o.current.map((t=>t.id!==e?t:{...t,isShown:!1})))}),[o,r]),w=n((e=>{r(o.current.filter((t=>t.id!==e)))}),[o,r]),b=n((()=>{r(o.current.map((e=>({...e,isShown:!1}))))}),[o,r]),x=n(((e,t)=>{const i=t&&void 0!==t.duration?t.duration:h,n=null!=t&&t.variant?t.variant:"positive",a=!t||void 0===t.withClose||t.withClose,s=null!=t&&t.id?t.id:(A+=1,A),l={id:s,text:e,onClose:()=>w(s),duration:i,withClose:a,isShown:!0,variant:n,title:null==t?void 0:t.title,cta:null==t?void 0:t.cta},u=o.current.find((e=>e.id===l.id));return u||(r("top"===c?[l,...o.current]:[...o.current,l]),l)}),[w,h,o,c,r]);return e("close",v),e("show",x),e("closeAll",b),e("setPlacement",g),e("setDuration",p),t.createElement("div",{"data-test-id":"cf-notification-container",className:a(f.manager)},t.createElement("div",{className:a(f.container)},o.current.map((e=>t.createElement(L,{variant:e.variant,duration:e.duration,key:e.id,withCloseButton:e.withClose,onClose:e.onClose,isShown:e.isShown,title:e.title,cta:e.cta},e.text)))))}let W=!1;const R={};function X(e,t){R[e]=t}function O(e){return(...i)=>W?Promise.resolve(e(...i)):(W=!0,new Promise((n=>{!function(e){const i=document.createElement("div");document.body.appendChild(i),r(t.createElement(H,{register:X}),i,e)}((()=>{n(e(...i))}))})))}const _=e=>(t,i)=>{if(R.show)return R.show(t,{...i||{},variant:e})},j={success:O(_("positive")),error:O(_("negative")),warning:O(_("warning")),close:O((e=>{if(R.close)return R.close(e)})),closeAll:O((()=>{if(R.closeAll)return R.closeAll()})),setPlacement:O(((e,t)=>{if(R.setPlacement)return R.setPlacement(e,t)})),setDuration:O((e=>{if(R.setDuration)return R.setDuration(e)}))};var $,U;$=module.exports,U=M,Object.keys(U).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty($,e,{enumerable:!0,get:function(){return U[e]}})}));
+var e=require("react"),t=y(e),{useState:i,useCallback:n,Component:o}=e,{render:r}=require("react-dom"),{cx:a,css:s}=require("emotion"),{useAsyncState:l,Flex:c,Box:u}=require("@contentful/f36-core"),m=y(require("@babel/runtime/helpers/extends")),{CheckCircleIcon:d,WarningIcon:h,ErrorCircleIcon:p,CloseIcon:f}=require("@contentful/f36-icons"),{Button:g}=require("@contentful/f36-button"),{TextLink:v}=require("@contentful/f36-text-link"),{Paragraph:w,Heading:b}=require("@contentful/f36-typography"),S=y(require("@contentful/f36-tokens")),x=y(require("@babel/runtime/helpers/defineProperty")),E=y(require("react-animate-height"));function C(e,t,i,n){Object.defineProperty(e,t,{get:i,set:n,enumerable:!0,configurable:!0})}function y(e){return e&&e.__esModule?e.default:e}var M={};C(M,"Notification",(()=>j)),C(M,"NotificationItem",(()=>D)),C(M,"NotificationItemContainer",(()=>L)),C(M,"NotificationsManager",(()=>H));const N={positive:S.green600,negative:S.red600,warning:S.orange400},k=({variant:e})=>s({background:S.colorWhite,borderRadius:S.borderRadiusMedium,boxShadow:S.boxShadowHeavy,boxSizing:"border-box",display:"flex",overflow:"hidden",position:"relative",padding:S.spacingM,width:"100%","&:before":{backgroundColor:N[e],content:'""',height:"100%",left:0,position:"absolute",top:0,width:"2px"}},""),P=({variant:e})=>s({fill:N[e],marginRight:S.spacingM,alignItems:"flex-start"},""),q={fontSize:S.fontSizeM,lineHeight:S.lineHeightM,width:"100%"},T={color:S.gray800,fontSize:S.fontSizeL,lineHeight:S.lineHeightL},B={color:S.gray700,"&:last-child":{marginBottom:0}},I={marginBottom:`-${S.spacingXs}`,marginRight:`-${S.spacingXs}`,marginTop:`-${S.spacingXs}`},z=(e,i)=>{var n;const{className:o,children:r,cta:l,withCloseButton:S=!0,variant:x="positive",onClose:E,testId:C="cf-ui-notification",title:y,...M}=e,N=(({variant:e})=>({wrapper:k({variant:e}),icon:P({variant:e}),notification:s(q,""),title:s(T,""),content:s(B,""),closeButton:s(I,"")}))({variant:x}),z=y?"medium":"small",D={positive:t.createElement(d,{variant:x,size:z}),warning:t.createElement(h,{variant:x,size:z}),negative:t.createElement(p,{variant:x,size:z})};return t.createElement(c,m({"data-test-id":C,role:"alert","data-intent":{positive:"success",warning:"warning",negative:"error"}[x],"aria-live":"positive"===x?"polite":"assertive",className:a(N.wrapper,o)},M,{ref:i}),t.createElement(u,{className:a(N.icon)},D[x]),t.createElement(u,{className:a(N.notification)},y&&t.createElement(b,{as:"h2",className:a(N.title),marginBottom:"spacingXs"},y),r&&t.createElement(w,{className:N.content,marginBottom:"spacingXs"},r),(null==l?void 0:l.label)&&t.createElement(v,m({},null==l?void 0:l.textLinkProps,{as:(null==l||null===(n=l.textLinkProps)||void 0===n?void 0:n.as)||"button"}),l.label)),S&&t.createElement(u,null,t.createElement(g,{className:a(N.closeButton),variant:"transparent",icon:t.createElement(f,null),onClick:()=>{E&&E()},testId:"cf-ui-notification-close","aria-label":"Dismiss"})))},D=t.forwardRef(z);class L extends o{componentDidMount(){this.startTimer(),this.setState({isShown:!0})}componentDidUpdate(e){e.isShown!==this.props.isShown&&this.setState({isShown:this.props.isShown})}componentWillUnmount(){this.stopTimer()}render(){const{isShown:e,duration:i,...n}=this.props;return t.createElement(E,{duration:200,height:this.state.isShown?"auto":0,easing:"ease-in-out",animateOpacity:!0,onAnimationEnd:()=>{!1===this.state.isShown&&this.props.onClose&&this.props.onClose()}},t.createElement("div",{className:a(s({name:"uw7k7s",styles:"pointer-events:all;"})),onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},t.createElement(D,m({},n,{onClose:this.handleClose}))))}constructor(...e){super(...e),x(this,"timer",null),x(this,"state",{isShown:!1}),x(this,"startTimer",(()=>{if(this.props.duration){if(0===this.props.duration)return;this.timer=window.setTimeout((()=>{this.handleClose()}),this.props.duration)}})),x(this,"stopTimer",(()=>{0!==this.props.duration&&this.timer&&(clearTimeout(this.timer),this.timer=null)})),x(this,"handleClose",(()=>{this.stopTimer(),this.setState({isShown:!1})})),x(this,"handleMouseEnter",(()=>{this.stopTimer()})),x(this,"handleMouseLeave",(()=>{this.startTimer()}))}}x(L,"defaultProps",{isShown:!1});let A=0;function H({register:e}){const[o,r]=l([]),[c,u]=i("bottom"),[m,d]=i(20),[h,p]=i(6e3),f=((e,t)=>({manager:s({left:0,margin:"0 auto",maxWidth:"560px",position:"fixed",pointerEvents:"none",right:0,[e]:t,zIndex:S.zIndexNotification},""),container:s({display:"flex",flexDirection:"column",margin:"0 auto",maxWidth:"560px",minWidth:"360px","& > div":{marginBottom:"top"===e?0:S.spacingS,marginTop:"top"===e?S.spacingS:0}},"")}))(c,m),g=n(((e,t)=>{if("bottom"===e||"top"===e){const i=t&&t.offset?t.offset:20;u(e),d(i)}}),[]),v=n((e=>{r(o.current.map((t=>t.id!==e?t:{...t,isShown:!1})))}),[o,r]),w=n((e=>{r(o.current.filter((t=>t.id!==e)))}),[o,r]),b=n((()=>{r(o.current.map((e=>({...e,isShown:!1}))))}),[o,r]),x=n(((e,t)=>{const i=t&&void 0!==t.duration?t.duration:h,n=null!=t&&t.variant?t.variant:"positive",a=!t||void 0===t.withClose||t.withClose,s=null!=t&&t.id?t.id:(A+=1,A),l={id:s,text:e,onClose:()=>w(s),duration:i,withClose:a,isShown:!0,variant:n,title:null==t?void 0:t.title,cta:null==t?void 0:t.cta},u=o.current.find((e=>e.id===l.id));return u||(r("top"===c?[l,...o.current]:[...o.current,l]),l)}),[w,h,o,c,r]);return e("close",v),e("show",x),e("closeAll",b),e("setPlacement",g),e("setDuration",p),t.createElement("div",{"data-test-id":"cf-notification-container",className:a(f.manager)},t.createElement("div",{className:a(f.container)},o.current.map((e=>t.createElement(L,{variant:e.variant,duration:e.duration,key:e.id,withCloseButton:e.withClose,onClose:e.onClose,isShown:e.isShown,title:e.title,cta:e.cta},e.text)))))}let W=!1;const R={};function X(e,t){R[e]=t}function O(e){return(...i)=>W?Promise.resolve(e(...i)):(W=!0,new Promise((n=>{!function(e){const i=document.createElement("div");document.body.appendChild(i),r(t.createElement(H,{register:X}),i,e)}((()=>{n(e(...i))}))})))}const _=e=>(t,i)=>{if(R.show)return R.show(t,{...i||{},variant:e})},j={success:O(_("positive")),error:O(_("negative")),warning:O(_("warning")),close:O((e=>{if(R.close)return R.close(e)})),closeAll:O((()=>{if(R.closeAll)return R.closeAll()})),setPlacement:O(((e,t)=>{if(R.setPlacement)return R.setPlacement(e,t)})),setDuration:O((e=>{if(R.setDuration)return R.setDuration(e)}))};var $,U;$=module.exports,U=M,Object.keys(U).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty($,e,{enumerable:!0,get:function(){return U[e]}})}));
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import t,{useState as e,useCallback as i,Component as n}from"react";import{render as o}from"react-dom";import{cx as a,css as s}from"emotion";import{useAsyncState as r,Flex as l,Box as c}from"@contentful/f36-core";import m from"@babel/runtime/helpers/esm/extends";import{WarningIcon as u,CheckCircleIcon as h,CloseIcon as p,ErrorCircleIcon as d}from"@contentful/f36-icons";import{Button as f}from"@contentful/f36-button";import{TextLink as g}from"@contentful/f36-text-link";import{Heading as v,Paragraph as w}from"@contentful/f36-typography";import S from"@contentful/f36-tokens";import x from"@babel/runtime/helpers/esm/defineProperty";import b from"react-animate-height";function C(t,e,i,n){Object.defineProperty(t,e,{get:i,set:n,enumerable:!0,configurable:!0})}var E={};C(E,"Notification",(()=>O)),C(E,"NotificationItem",(()=>z)),C(E,"NotificationItemContainer",(()=>D)),C(E,"NotificationsManager",(()=>A));const N={positive:S.green600,negative:S.red600,warning:S.orange400},y=({variant:t})=>s({background:S.colorWhite,borderRadius:S.borderRadiusMedium,boxShadow:S.boxShadowHeavy,boxSizing:"border-box",display:"flex",overflow:"hidden",position:"relative",padding:S.spacingM,width:"100%","&:before":{backgroundColor:N[t],content:'""',height:"100%",left:0,position:"absolute",top:0,width:"2px"}},""),M=({variant:t})=>s({fill:N[t],marginRight:S.spacingM,alignItems:"flex-start"},""),I={fontSize:S.fontSizeM,lineHeight:S.lineHeightM,width:"100%"},k={color:S.gray800,fontSize:S.fontSizeL,lineHeight:S.lineHeightL},P={color:S.gray700,"&:last-child":{marginBottom:0}},T={marginBottom:`-${S.spacingXs}`,marginRight:`-${S.spacingXs}`,marginTop:`-${S.spacingXs}`},B=(e,i)=>{var n;const{className:o,children:r,cta:S,withCloseButton:x=!0,variant:b="positive",onClose:C,testId:E="cf-ui-notification",title:N,...B}=e,z=(({variant:t})=>({wrapper:y({variant:t}),icon:M({variant:t}),notification:s(I,""),title:s(k,""),content:s(P,""),closeButton:s(T,"")}))({variant:b}),D=N?"medium":"small",L={positive:t.createElement(h,{variant:b,size:D}),warning:t.createElement(u,{variant:b,size:D}),negative:t.createElement(d,{variant:b,size:D})};return t.createElement(l,m({"data-test-id":E,role:"alert","data-intent":{positive:"success",warning:"warning",negative:"error"}[b],"aria-live":"positive"===b?"polite":"assertive",className:a(z.wrapper,o)},B,{ref:i}),t.createElement(c,{className:a(z.icon)},L[b]),t.createElement(c,{className:a(z.notification)},N&&t.createElement(v,{as:"h2",className:a(z.title),marginBottom:"spacingXs"},N),r&&t.createElement(w,{className:z.content,marginBottom:"spacingXs"},r),(null==S?void 0:S.label)&&t.createElement(g,m({},null==S?void 0:S.textLinkProps,{as:(null==S||null===(n=S.textLinkProps)||void 0===n?void 0:n.as)||"button"}),S.label)),x&&t.createElement(c,null,t.createElement(f,{className:a(z.closeButton),variant:"transparent",icon:t.createElement(p,null),onClick:()=>{C&&C()},testId:"cf-ui-notification-close","aria-label":"Dismiss"})))},z=t.forwardRef(B);class D extends n{componentDidMount(){this.startTimer(),this.setState({isShown:!0})}componentDidUpdate(t){t.isShown!==this.props.isShown&&this.setState({isShown:this.props.isShown})}componentWillUnmount(){this.stopTimer()}render(){const{isShown:e,duration:i,...n}=this.props;return t.createElement(b,{duration:200,height:this.state.isShown?"auto":0,easing:"ease-in-out",animateOpacity:!0,onAnimationEnd:()=>{!1===this.state.isShown&&this.props.onClose&&this.props.onClose()}},t.createElement("div",{className:a(s({name:"uw7k7s",styles:"pointer-events:all;"})),onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},t.createElement(z,m({},n,{onClose:this.handleClose}))))}constructor(...t){super(...t),x(this,"timer",null),x(this,"state",{isShown:!1}),x(this,"startTimer",(()=>{if(this.props.duration){if(0===this.props.duration)return;this.timer=window.setTimeout((()=>{this.handleClose()}),this.props.duration)}})),x(this,"stopTimer",(()=>{0!==this.props.duration&&this.timer&&(clearTimeout(this.timer),this.timer=null)})),x(this,"handleClose",(()=>{this.stopTimer(),this.setState({isShown:!1})})),x(this,"handleMouseEnter",(()=>{this.stopTimer()})),x(this,"handleMouseLeave",(()=>{this.startTimer()}))}}x(D,"defaultProps",{isShown:!1});let L=0;function A({register:n}){const[o,l]=r([]),[c,m]=e("bottom"),[u,h]=e(20),[p,d]=e(6e3),f=((t,e)=>({manager:s({left:0,margin:"0 auto",maxWidth:"560px",position:"fixed",pointerEvents:"none",right:0,[t]:e,zIndex:S.zIndexNotification},""),container:s({display:"flex",flexDirection:"column",margin:"0 auto",maxWidth:"560px",minWidth:"360px","& > div":{marginBottom:"top"===t?0:S.spacingS,marginTop:"top"===t?S.spacingS:0}},"")}))(c,u),g=i(((t,e)=>{if("bottom"===t||"top"===t){const i=e&&e.offset?e.offset:20;m(t),h(i)}}),[]),v=i((t=>{l(o.current.map((e=>e.id!==t?e:{...e,isShown:!1})))}),[o,l]),w=i((t=>{l(o.current.filter((e=>e.id!==t)))}),[o,l]),x=i((()=>{l(o.current.map((t=>({...t,isShown:!1}))))}),[o,l]),b=i(((t,e)=>{const i=e&&void 0!==e.duration?e.duration:p,n=null!=e&&e.variant?e.variant:"positive",a=!e||void 0===e.withClose||e.withClose,s=null!=e&&e.id?e.id:(L+=1,L),r={id:s,text:t,onClose:()=>w(s),duration:i,withClose:a,isShown:!0,variant:n,title:null==e?void 0:e.title,cta:null==e?void 0:e.cta},m=o.current.find((t=>t.id===r.id));return m||(l("top"===c?[r,...o.current]:[...o.current,r]),r)}),[w,p,o,c,l]);return n("close",v),n("show",b),n("closeAll",x),n("setPlacement",g),n("setDuration",d),t.createElement("div",{"data-test-id":"cf-notification-container",className:a(f.manager)},t.createElement("div",{className:a(f.container)},o.current.map((e=>t.createElement(D,{variant:e.variant,duration:e.duration,key:e.id,withCloseButton:e.withClose,onClose:e.onClose,isShown:e.isShown,title:e.title,cta:e.cta},e.text)))))}let H=!1;const W={};function R(t,e){W[t]=e}function X(e){return(...i)=>H?Promise.resolve(e(...i)):(H=!0,new Promise((n=>{!function(e){const i=document.createElement("div");document.body.appendChild(i),o(t.createElement(A,{register:R}),i,e)}((()=>{n(e(...i))}))})))}const $=t=>(e,i)=>{if(W.show)return W.show(e,{...i||{},variant:t})},O={success:X($("positive")),error:X($("negative")),warning:X($("warning")),close:X((t=>{if(W.close)return W.close(t)})),closeAll:X((()=>{if(W.closeAll)return W.closeAll()})),setPlacement:X(((t,e)=>{if(W.setPlacement)return W.setPlacement(t,e)})),setDuration:X((t=>{if(W.setDuration)return W.setDuration(t)}))};export{O as Notification,z as NotificationItem,D as NotificationItemContainer,A as NotificationsManager};
+import t,{useCallback as e,useState as i,Component as n}from"react";import{render as o}from"react-dom";import{cx as a,css as s}from"emotion";import{useAsyncState as r,Flex as l,Box as c}from"@contentful/f36-core";import m from"@babel/runtime/helpers/esm/extends";import{CloseIcon as u,CheckCircleIcon as h,WarningIcon as p,ErrorCircleIcon as d}from"@contentful/f36-icons";import{Button as f}from"@contentful/f36-button";import{TextLink as g}from"@contentful/f36-text-link";import{Heading as v,Paragraph as w}from"@contentful/f36-typography";import S from"@contentful/f36-tokens";import x from"@babel/runtime/helpers/esm/defineProperty";import b from"react-animate-height";function C(t,e,i,n){Object.defineProperty(t,e,{get:i,set:n,enumerable:!0,configurable:!0})}var E={};C(E,"Notification",(()=>O)),C(E,"NotificationItem",(()=>z)),C(E,"NotificationItemContainer",(()=>D)),C(E,"NotificationsManager",(()=>A));const N={positive:S.green600,negative:S.red600,warning:S.orange400},y=({variant:t})=>s({background:S.colorWhite,borderRadius:S.borderRadiusMedium,boxShadow:S.boxShadowHeavy,boxSizing:"border-box",display:"flex",overflow:"hidden",position:"relative",padding:S.spacingM,width:"100%","&:before":{backgroundColor:N[t],content:'""',height:"100%",left:0,position:"absolute",top:0,width:"2px"}},""),M=({variant:t})=>s({fill:N[t],marginRight:S.spacingM,alignItems:"flex-start"},""),I={fontSize:S.fontSizeM,lineHeight:S.lineHeightM,width:"100%"},k={color:S.gray800,fontSize:S.fontSizeL,lineHeight:S.lineHeightL},P={color:S.gray700,"&:last-child":{marginBottom:0}},T={marginBottom:`-${S.spacingXs}`,marginRight:`-${S.spacingXs}`,marginTop:`-${S.spacingXs}`},B=(e,i)=>{var n;const{className:o,children:r,cta:S,withCloseButton:x=!0,variant:b="positive",onClose:C,testId:E="cf-ui-notification",title:N,...B}=e,z=(({variant:t})=>({wrapper:y({variant:t}),icon:M({variant:t}),notification:s(I,""),title:s(k,""),content:s(P,""),closeButton:s(T,"")}))({variant:b}),D=N?"medium":"small",L={positive:t.createElement(h,{variant:b,size:D}),warning:t.createElement(p,{variant:b,size:D}),negative:t.createElement(d,{variant:b,size:D})};return t.createElement(l,m({"data-test-id":E,role:"alert","data-intent":{positive:"success",warning:"warning",negative:"error"}[b],"aria-live":"positive"===b?"polite":"assertive",className:a(z.wrapper,o)},B,{ref:i}),t.createElement(c,{className:a(z.icon)},L[b]),t.createElement(c,{className:a(z.notification)},N&&t.createElement(v,{as:"h2",className:a(z.title),marginBottom:"spacingXs"},N),r&&t.createElement(w,{className:z.content,marginBottom:"spacingXs"},r),(null==S?void 0:S.label)&&t.createElement(g,m({},null==S?void 0:S.textLinkProps,{as:(null==S||null===(n=S.textLinkProps)||void 0===n?void 0:n.as)||"button"}),S.label)),x&&t.createElement(c,null,t.createElement(f,{className:a(z.closeButton),variant:"transparent",icon:t.createElement(u,null),onClick:()=>{C&&C()},testId:"cf-ui-notification-close","aria-label":"Dismiss"})))},z=t.forwardRef(B);class D extends n{componentDidMount(){this.startTimer(),this.setState({isShown:!0})}componentDidUpdate(t){t.isShown!==this.props.isShown&&this.setState({isShown:this.props.isShown})}componentWillUnmount(){this.stopTimer()}render(){const{isShown:e,duration:i,...n}=this.props;return t.createElement(b,{duration:200,height:this.state.isShown?"auto":0,easing:"ease-in-out",animateOpacity:!0,onAnimationEnd:()=>{!1===this.state.isShown&&this.props.onClose&&this.props.onClose()}},t.createElement("div",{className:a(s({name:"uw7k7s",styles:"pointer-events:all;"})),onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},t.createElement(z,m({},n,{onClose:this.handleClose}))))}constructor(...t){super(...t),x(this,"timer",null),x(this,"state",{isShown:!1}),x(this,"startTimer",(()=>{if(this.props.duration){if(0===this.props.duration)return;this.timer=window.setTimeout((()=>{this.handleClose()}),this.props.duration)}})),x(this,"stopTimer",(()=>{0!==this.props.duration&&this.timer&&(clearTimeout(this.timer),this.timer=null)})),x(this,"handleClose",(()=>{this.stopTimer(),this.setState({isShown:!1})})),x(this,"handleMouseEnter",(()=>{this.stopTimer()})),x(this,"handleMouseLeave",(()=>{this.startTimer()}))}}x(D,"defaultProps",{isShown:!1});let L=0;function A({register:n}){const[o,l]=r([]),[c,m]=i("bottom"),[u,h]=i(20),[p,d]=i(6e3),f=((t,e)=>({manager:s({left:0,margin:"0 auto",maxWidth:"560px",position:"fixed",pointerEvents:"none",right:0,[t]:e,zIndex:S.zIndexNotification},""),container:s({display:"flex",flexDirection:"column",margin:"0 auto",maxWidth:"560px",minWidth:"360px","& > div":{marginBottom:"top"===t?0:S.spacingS,marginTop:"top"===t?S.spacingS:0}},"")}))(c,u),g=e(((t,e)=>{if("bottom"===t||"top"===t){const i=e&&e.offset?e.offset:20;m(t),h(i)}}),[]),v=e((t=>{l(o.current.map((e=>e.id!==t?e:{...e,isShown:!1})))}),[o,l]),w=e((t=>{l(o.current.filter((e=>e.id!==t)))}),[o,l]),x=e((()=>{l(o.current.map((t=>({...t,isShown:!1}))))}),[o,l]),b=e(((t,e)=>{const i=e&&void 0!==e.duration?e.duration:p,n=null!=e&&e.variant?e.variant:"positive",a=!e||void 0===e.withClose||e.withClose,s=null!=e&&e.id?e.id:(L+=1,L),r={id:s,text:t,onClose:()=>w(s),duration:i,withClose:a,isShown:!0,variant:n,title:null==e?void 0:e.title,cta:null==e?void 0:e.cta},m=o.current.find((t=>t.id===r.id));return m||(l("top"===c?[r,...o.current]:[...o.current,r]),r)}),[w,p,o,c,l]);return n("close",v),n("show",b),n("closeAll",x),n("setPlacement",g),n("setDuration",d),t.createElement("div",{"data-test-id":"cf-notification-container",className:a(f.manager)},t.createElement("div",{className:a(f.container)},o.current.map((e=>t.createElement(D,{variant:e.variant,duration:e.duration,key:e.id,withCloseButton:e.withClose,onClose:e.onClose,isShown:e.isShown,title:e.title,cta:e.cta},e.text)))))}let H=!1;const W={};function R(t,e){W[t]=e}function X(e){return(...i)=>H?Promise.resolve(e(...i)):(H=!0,new Promise((n=>{!function(e){const i=document.createElement("div");document.body.appendChild(i),o(t.createElement(A,{register:R}),i,e)}((()=>{n(e(...i))}))})))}const $=t=>(e,i)=>{if(W.show)return W.show(e,{...i||{},variant:t})},O={success:X($("positive")),error:X($("negative")),warning:X($("warning")),close:X((t=>{if(W.close)return W.close(t)})),closeAll:X((()=>{if(W.closeAll)return W.closeAll()})),setPlacement:X(((t,e)=>{if(W.setPlacement)return W.setPlacement(t,e)})),setDuration:X((t=>{if(W.setDuration)return W.setDuration(t)}))};export{O as Notification,z as NotificationItem,D as NotificationItemContainer,A as NotificationsManager};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-notification",
-  "version": "4.0.1-next-v4-6754.2279+d702f155",
+  "version": "4.0.1-next-v4-6763.2280+68ec7ca7",
   "description": "Forma 36: Notification component",
@@ -10,8 +10,8 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-button": "4.0.1-next-v4-6754.2279+d702f155",
-    "@contentful/f36-core": "4.0.1-next-v4-6754.2279+d702f155",
-    "@contentful/f36-icons": "4.0.1-next-v4-6754.2279+d702f155",
-    "@contentful/f36-text-link": "4.0.1-next-v4-6754.2279+d702f155",
-    "@contentful/f36-tokens": "4.0.1-next-v4-6754.2279+d702f155",
-    "@contentful/f36-typography": "4.0.1-next-v4-6754.2279+d702f155",
+    "@contentful/f36-button": "4.0.1-next-v4-6763.2280+68ec7ca7",
+    "@contentful/f36-core": "4.0.1-next-v4-6763.2280+68ec7ca7",
+    "@contentful/f36-icons": "4.0.1-next-v4-6763.2280+68ec7ca7",
+    "@contentful/f36-text-link": "4.0.1-next-v4-6763.2280+68ec7ca7",
+    "@contentful/f36-tokens": "4.0.1-next-v4-6763.2280+68ec7ca7",
+    "@contentful/f36-typography": "4.0.1-next-v4-6763.2280+68ec7ca7",
     "emotion": "^10.0.17",
@@ -41,3 +41,3 @@ "react-animate-height": "^2.0.23"
   },
-  "gitHead": "d702f155ce0fbb822f92e55422796f4f4c88ba0d"
+  "gitHead": "68ec7ca78ed6341bed0b5d20a383f1589123569f"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No metric changes

Dependency changes

• Updated@contentful/f36-button@4.0.1-next-v4-6763.2280+68ec7ca7

• Updated@contentful/f36-core@4.0.1-next-v4-6763.2280+68ec7ca7

• Updated@contentful/f36-icons@4.0.1-next-v4-6763.2280+68ec7ca7

• Updated@contentful/f36-text-link@4.0.1-next-v4-6763.2280+68ec7ca7

• Updated@contentful/f36-tokens@4.0.1-next-v4-6763.2280+68ec7ca7

• Updated@contentful/f36-typography@4.0.1-next-v4-6763.2280+68ec7ca7