@contentful/f36-notification - npm Package Compare versions

Comparing version 4.48.0 to 4.48.1

dist/esm/index.js

@@ -15,2 +15,3 @@ import c, { Component, useState, useCallback, useRef } from 'react';
 export { Et as Notification, A as NotificationItem, P as NotificationItemContainer, I as NotificationsManager };
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

dist/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var c = require('react');
@@ -16,9 +14,9 @@ var reactDom = require('react-dom');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var c__default = /*#__PURE__*/_interopDefaultLegacy(c);
-var a__default = /*#__PURE__*/_interopDefaultLegacy(a);
-var vt__default = /*#__PURE__*/_interopDefaultLegacy(vt);
+var c__default = /*#__PURE__*/_interopDefault(c);
+var a__default = /*#__PURE__*/_interopDefault(a);
+var vt__default = /*#__PURE__*/_interopDefault(vt);
 
-var ot=Object.defineProperty,it=Object.defineProperties;var et=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var X=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var W=(t,o,i)=>o in t?ot(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i,m=(t,o)=>{for(var i in o||(o={}))X.call(o,i)&&W(t,i,o[i]);if(v)for(var i of v(o))U.call(o,i)&&W(t,i,o[i]);return t},f=(t,o)=>it(t,et(o));var b=(t,o)=>{var i={};for(var r in t)X.call(t,r)&&o.indexOf(r)<0&&(i[r]=t[r]);if(t!=null&&v)for(var r of v(t))o.indexOf(r)<0&&U.call(t,r)&&(i[r]=t[r]);return i};function $(t){let o=c.useRef(t),[,i]=c.useState(!1);return [o,s=>{Object.is(o.current,s)||(o.current=s,i(u=>!u));}]}var q={positive:a__default["default"].green600,negative:a__default["default"].red600,warning:a__default["default"].orange400,primary:a__default["default"].blue600},at=({variant:t})=>emotion.css({background:a__default["default"].colorWhite,borderRadius:a__default["default"].borderRadiusMedium,boxShadow:a__default["default"].boxShadowHeavy,boxSizing:"border-box",display:"flex",overflow:"hidden",position:"relative",padding:a__default["default"].spacingM,width:"100%","&:before":{backgroundColor:q[t],content:'""',height:"100%",left:0,position:"absolute",top:0,width:"2px"}}),st=({variant:t})=>emotion.css({fill:q[t],marginRight:a__default["default"].spacingM,alignItems:"flex-start"}),ct={fontSize:a__default["default"].fontSizeM,lineHeight:a__default["default"].lineHeightM,width:"100%"},lt={color:a__default["default"].gray800,fontSize:a__default["default"].fontSizeL,lineHeight:a__default["default"].lineHeightL},pt={color:a__default["default"].gray700,wordBreak:"break-word",hyphens:"auto","&:last-child":{marginBottom:0}},mt={marginBottom:`-${a__default["default"].spacingXs}`,marginRight:`-${a__default["default"].spacingXs}`,marginTop:`-${a__default["default"].spacingXs}`},_=({variant:t})=>({wrapper:at({variant:t}),icon:st({variant:t}),notification:emotion.css(ct),title:emotion.css(lt),content:emotion.css(pt),closeButton:emotion.css(mt)});var wt=(t,o)=>{var e;let n=t,{className:i,children:r,cta:s,withCloseButton:u=!0,variant:p="positive",onClose:C,testId:M="cf-ui-notification",title:S}=n,V=b(n,["className","children","cta","withCloseButton","variant","onClose","testId","title"]),d=_({variant:p}),N=S?"medium":"small",B={positive:c__default["default"].createElement(f36Icons.CheckCircleIcon,{variant:p,size:N}),warning:c__default["default"].createElement(f36Icons.WarningIcon,{variant:p,size:N}),negative:c__default["default"].createElement(f36Icons.ErrorCircleIcon,{variant:p,size:N}),primary:c__default["default"].createElement(f36Icons.InfoCircleIcon,{variant:p,size:N})};return c__default["default"].createElement(f36Core.Flex,f(m({"data-test-id":M,role:"alert","data-intent":{positive:"success",warning:"warning",negative:"error",primary:"info"}[p],"aria-live":p==="positive"?"polite":"assertive",className:emotion.cx(d.wrapper,i)},V),{ref:o}),c__default["default"].createElement(f36Core.Box,{className:emotion.cx(d.icon)},B[p]),c__default["default"].createElement(f36Core.Box,{className:emotion.cx(d.notification)},S&&c__default["default"].createElement(f36Typography.Heading,{as:"h2",className:emotion.cx(d.title),marginBottom:"spacingXs"},S),r&&c__default["default"].createElement(f36Typography.Paragraph,{className:d.content,marginBottom:"spacingXs"},r),(s==null?void 0:s.label)&&c__default["default"].createElement(f36TextLink.TextLink,f(m({},s==null?void 0:s.textLinkProps),{as:((e=s==null?void 0:s.textLinkProps)==null?void 0:e.as)||"button"}),s.label)),u&&c__default["default"].createElement(f36Core.Box,null,c__default["default"].createElement(f36Button.Button,{className:emotion.cx(d.closeButton),variant:"transparent",startIcon:c__default["default"].createElement(f36Icons.CloseIcon,null),onClick:()=>{C&&C();},testId:"cf-ui-notification-close","aria-label":"Dismiss"})))},A=c__default["default"].forwardRef(wt);var It={isShown:!1},P=class extends c.Component{constructor(){super(...arguments);this.timer=null;this.state={isShown:!1};this.startTimer=()=>{if(this.props.duration){if(this.props.duration===0)return;this.timer=window.setTimeout(()=>{this.handleClose();},this.props.duration);}};this.stopTimer=()=>{this.props.duration!==0&&this.timer&&(clearTimeout(this.timer),this.timer=null);};this.handleClose=()=>{this.stopTimer(),this.setState({isShown:!1});};this.handleMouseEnter=()=>{this.stopTimer();};this.handleMouseLeave=()=>{this.startTimer();};}componentDidMount(){this.startTimer(),this.setState({isShown:!0});}componentDidUpdate(i){i.isShown!==this.props.isShown&&this.setState({isShown:this.props.isShown});}componentWillUnmount(){this.stopTimer();}render(){let u=this.props,s=b(u,["isShown","duration"]);return c__default["default"].createElement(vt__default["default"],{duration:200,height:this.state.isShown?"auto":0,easing:"ease-in-out",animateOpacity:!0,onHeightAnimationEnd:()=>{this.state.isShown===!1&&this.props.onClose&&this.props.onClose();}},c__default["default"].createElement("div",{className:emotion.cx(emotion.css({pointerEvents:"all"})),onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c__default["default"].createElement(A,f(m({},s),{onClose:this.handleClose}))))}};P.defaultProps=It;var J=(t,o)=>({manager:emotion.css({left:0,margin:"0 auto",maxWidth:"560px",position:"fixed",pointerEvents:"none",right:0,[t]:o,zIndex:a__default["default"].zIndexNotification}),container:emotion.css({display:"flex",flexDirection:"column",margin:"0 auto",maxWidth:"560px",minWidth:"360px","& > div":{marginBottom:t==="top"?0:a__default["default"].spacingS,marginTop:t==="top"?a__default["default"].spacingS:0}})});var Q=0,Tt=()=>(Q+=1,Q),I=({register:t})=>{let[o,i]=$([]),[r,s]=c.useState("bottom"),[u,p]=c.useState(20),[C,M]=c.useState(6e3),S=J(r,u),V=c.useCallback((n,e)=>{if(n==="bottom"||n==="top"){let D=e&&e.offset?e.offset:20;s(n),p(D);}},[]),d=c.useCallback(n=>{i(o.current.map(e=>e.id!==n?e:f(m({},e),{isShown:!1})));},[o,i]),N=c.useCallback(n=>{i(o.current.filter(e=>e.id!==n));},[o,i]),B=c.useCallback(()=>{i(o.current.map(n=>f(m({},n),{isShown:!1})));},[o,i]),L=c.useCallback((n,e)=>{let D=e&&typeof e.duration!="undefined"?e.duration:C,Z=e!=null&&e.variant?e.variant:"positive",R=e&&typeof e.withClose!="undefined"?e.withClose:!0,j=e!=null&&e.id?e.id:Tt(),g={id:j,text:n,onClose:()=>N(j),duration:D,withClose:R,isShown:!0,variant:Z,title:e==null?void 0:e.title,cta:e==null?void 0:e.cta},F=o.current.find(tt=>tt.id===g.id);return F||(i(r==="top"?[g,...o.current]:[...o.current,g]),g)},[N,C,o,r,i]);return t("close",d),t("show",L),t("closeAll",B),t("setPlacement",V),t("setDuration",M),c__default["default"].createElement("div",{"data-test-id":"cf-notification-container",className:emotion.cx(S.manager)},c__default["default"].createElement("div",{className:emotion.cx(S.container)},o.current.map(n=>c__default["default"].createElement(P,{variant:n.variant,duration:n.duration,key:n.id,withCloseButton:n.withClose,onClose:n.onClose,isShown:n.isShown,title:n.title,cta:n.cta},n.text))))};I.displayName="NotificationsManager";var Y=!1,l={};function Bt(t,o){l[t]=o;}function Dt(t){let o=document.createElement("div");document.body.appendChild(o),reactDom.render(c__default["default"].createElement(I,{register:Bt}),o,t);}function h(t){return (...o)=>Y?Promise.resolve(t(...o)):(Y=!0,new Promise(i=>{Dt(()=>{i(t(...o));});}))}var T=t=>(o,i)=>{if(l.show)return l.show(o,f(m({},i||{}),{variant:t}))},Et={success:h(T("positive")),error:h(T("negative")),warning:h(T("warning")),info:h(T("primary")),close:h(t=>{if(l.close)return l.close(t)}),closeAll:h(()=>{if(l.closeAll)return l.closeAll()}),setPlacement:h((t,o)=>{if(l.setPlacement)return l.setPlacement(t,o)}),setDuration:h(t=>{if(l.setDuration)return l.setDuration(t)})};
+var ot=Object.defineProperty,it=Object.defineProperties;var et=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var X=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var W=(t,o,i)=>o in t?ot(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i,m=(t,o)=>{for(var i in o||(o={}))X.call(o,i)&&W(t,i,o[i]);if(v)for(var i of v(o))U.call(o,i)&&W(t,i,o[i]);return t},f=(t,o)=>it(t,et(o));var b=(t,o)=>{var i={};for(var r in t)X.call(t,r)&&o.indexOf(r)<0&&(i[r]=t[r]);if(t!=null&&v)for(var r of v(t))o.indexOf(r)<0&&U.call(t,r)&&(i[r]=t[r]);return i};function $(t){let o=c.useRef(t),[,i]=c.useState(!1);return [o,s=>{Object.is(o.current,s)||(o.current=s,i(u=>!u));}]}var q={positive:a__default.default.green600,negative:a__default.default.red600,warning:a__default.default.orange400,primary:a__default.default.blue600},at=({variant:t})=>emotion.css({background:a__default.default.colorWhite,borderRadius:a__default.default.borderRadiusMedium,boxShadow:a__default.default.boxShadowHeavy,boxSizing:"border-box",display:"flex",overflow:"hidden",position:"relative",padding:a__default.default.spacingM,width:"100%","&:before":{backgroundColor:q[t],content:'""',height:"100%",left:0,position:"absolute",top:0,width:"2px"}}),st=({variant:t})=>emotion.css({fill:q[t],marginRight:a__default.default.spacingM,alignItems:"flex-start"}),ct={fontSize:a__default.default.fontSizeM,lineHeight:a__default.default.lineHeightM,width:"100%"},lt={color:a__default.default.gray800,fontSize:a__default.default.fontSizeL,lineHeight:a__default.default.lineHeightL},pt={color:a__default.default.gray700,wordBreak:"break-word",hyphens:"auto","&:last-child":{marginBottom:0}},mt={marginBottom:`-${a__default.default.spacingXs}`,marginRight:`-${a__default.default.spacingXs}`,marginTop:`-${a__default.default.spacingXs}`},_=({variant:t})=>({wrapper:at({variant:t}),icon:st({variant:t}),notification:emotion.css(ct),title:emotion.css(lt),content:emotion.css(pt),closeButton:emotion.css(mt)});var wt=(t,o)=>{var e;let n=t,{className:i,children:r,cta:s,withCloseButton:u=!0,variant:p="positive",onClose:C,testId:M="cf-ui-notification",title:S}=n,V=b(n,["className","children","cta","withCloseButton","variant","onClose","testId","title"]),d=_({variant:p}),N=S?"medium":"small",B={positive:c__default.default.createElement(f36Icons.CheckCircleIcon,{variant:p,size:N}),warning:c__default.default.createElement(f36Icons.WarningIcon,{variant:p,size:N}),negative:c__default.default.createElement(f36Icons.ErrorCircleIcon,{variant:p,size:N}),primary:c__default.default.createElement(f36Icons.InfoCircleIcon,{variant:p,size:N})};return c__default.default.createElement(f36Core.Flex,f(m({"data-test-id":M,role:"alert","data-intent":{positive:"success",warning:"warning",negative:"error",primary:"info"}[p],"aria-live":p==="positive"?"polite":"assertive",className:emotion.cx(d.wrapper,i)},V),{ref:o}),c__default.default.createElement(f36Core.Box,{className:emotion.cx(d.icon)},B[p]),c__default.default.createElement(f36Core.Box,{className:emotion.cx(d.notification)},S&&c__default.default.createElement(f36Typography.Heading,{as:"h2",className:emotion.cx(d.title),marginBottom:"spacingXs"},S),r&&c__default.default.createElement(f36Typography.Paragraph,{className:d.content,marginBottom:"spacingXs"},r),(s==null?void 0:s.label)&&c__default.default.createElement(f36TextLink.TextLink,f(m({},s==null?void 0:s.textLinkProps),{as:((e=s==null?void 0:s.textLinkProps)==null?void 0:e.as)||"button"}),s.label)),u&&c__default.default.createElement(f36Core.Box,null,c__default.default.createElement(f36Button.Button,{className:emotion.cx(d.closeButton),variant:"transparent",startIcon:c__default.default.createElement(f36Icons.CloseIcon,null),onClick:()=>{C&&C();},testId:"cf-ui-notification-close","aria-label":"Dismiss"})))},A=c__default.default.forwardRef(wt);var It={isShown:!1},P=class extends c.Component{constructor(){super(...arguments);this.timer=null;this.state={isShown:!1};this.startTimer=()=>{if(this.props.duration){if(this.props.duration===0)return;this.timer=window.setTimeout(()=>{this.handleClose();},this.props.duration);}};this.stopTimer=()=>{this.props.duration!==0&&this.timer&&(clearTimeout(this.timer),this.timer=null);};this.handleClose=()=>{this.stopTimer(),this.setState({isShown:!1});};this.handleMouseEnter=()=>{this.stopTimer();};this.handleMouseLeave=()=>{this.startTimer();};}componentDidMount(){this.startTimer(),this.setState({isShown:!0});}componentDidUpdate(i){i.isShown!==this.props.isShown&&this.setState({isShown:this.props.isShown});}componentWillUnmount(){this.stopTimer();}render(){let u=this.props,s=b(u,["isShown","duration"]);return c__default.default.createElement(vt__default.default,{duration:200,height:this.state.isShown?"auto":0,easing:"ease-in-out",animateOpacity:!0,onHeightAnimationEnd:()=>{this.state.isShown===!1&&this.props.onClose&&this.props.onClose();}},c__default.default.createElement("div",{className:emotion.cx(emotion.css({pointerEvents:"all"})),onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c__default.default.createElement(A,f(m({},s),{onClose:this.handleClose}))))}};P.defaultProps=It;var J=(t,o)=>({manager:emotion.css({left:0,margin:"0 auto",maxWidth:"560px",position:"fixed",pointerEvents:"none",right:0,[t]:o,zIndex:a__default.default.zIndexNotification}),container:emotion.css({display:"flex",flexDirection:"column",margin:"0 auto",maxWidth:"560px",minWidth:"360px","& > div":{marginBottom:t==="top"?0:a__default.default.spacingS,marginTop:t==="top"?a__default.default.spacingS:0}})});var Q=0,Tt=()=>(Q+=1,Q),I=({register:t})=>{let[o,i]=$([]),[r,s]=c.useState("bottom"),[u,p]=c.useState(20),[C,M]=c.useState(6e3),S=J(r,u),V=c.useCallback((n,e)=>{if(n==="bottom"||n==="top"){let D=e&&e.offset?e.offset:20;s(n),p(D);}},[]),d=c.useCallback(n=>{i(o.current.map(e=>e.id!==n?e:f(m({},e),{isShown:!1})));},[o,i]),N=c.useCallback(n=>{i(o.current.filter(e=>e.id!==n));},[o,i]),B=c.useCallback(()=>{i(o.current.map(n=>f(m({},n),{isShown:!1})));},[o,i]),L=c.useCallback((n,e)=>{let D=e&&typeof e.duration!="undefined"?e.duration:C,Z=e!=null&&e.variant?e.variant:"positive",R=e&&typeof e.withClose!="undefined"?e.withClose:!0,j=e!=null&&e.id?e.id:Tt(),g={id:j,text:n,onClose:()=>N(j),duration:D,withClose:R,isShown:!0,variant:Z,title:e==null?void 0:e.title,cta:e==null?void 0:e.cta},F=o.current.find(tt=>tt.id===g.id);return F||(i(r==="top"?[g,...o.current]:[...o.current,g]),g)},[N,C,o,r,i]);return t("close",d),t("show",L),t("closeAll",B),t("setPlacement",V),t("setDuration",M),c__default.default.createElement("div",{"data-test-id":"cf-notification-container",className:emotion.cx(S.manager)},c__default.default.createElement("div",{className:emotion.cx(S.container)},o.current.map(n=>c__default.default.createElement(P,{variant:n.variant,duration:n.duration,key:n.id,withCloseButton:n.withClose,onClose:n.onClose,isShown:n.isShown,title:n.title,cta:n.cta},n.text))))};I.displayName="NotificationsManager";var Y=!1,l={};function Bt(t,o){l[t]=o;}function Dt(t){let o=document.createElement("div");document.body.appendChild(o),reactDom.render(c__default.default.createElement(I,{register:Bt}),o,t);}function h(t){return (...o)=>Y?Promise.resolve(t(...o)):(Y=!0,new Promise(i=>{Dt(()=>{i(t(...o));});}))}var T=t=>(o,i)=>{if(l.show)return l.show(o,f(m({},i||{}),{variant:t}))},Et={success:h(T("positive")),error:h(T("negative")),warning:h(T("warning")),info:h(T("primary")),close:h(t=>{if(l.close)return l.close(t)}),closeAll:h(()=>{if(l.closeAll)return l.closeAll()}),setPlacement:h((t,o)=>{if(l.setPlacement)return l.setPlacement(t,o)}),setDuration:h(t=>{if(l.setDuration)return l.setDuration(t)})};
 
@@ -29,2 +27,3 @@ exports.Notification = Et;
 exports.NotificationsManager = I;
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-notification",
-  "version": "4.48.0",
+  "version": "4.48.1",
   "description": "Forma 36: Notification component",
@@ -9,8 +9,8 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-button": "^4.48.0",
-    "@contentful/f36-core": "^4.48.0",
+    "@contentful/f36-button": "^4.48.1",
+    "@contentful/f36-core": "^4.48.1",
     "@contentful/f36-icons": "^4.27.0",
-    "@contentful/f36-text-link": "^4.48.0",
+    "@contentful/f36-text-link": "^4.48.1",
     "@contentful/f36-tokens": "^4.0.2",
-    "@contentful/f36-typography": "^4.48.0",
+    "@contentful/f36-typography": "^4.48.1",
     "@swc/helpers": "^0.4.14",
@@ -17,0 +17,0 @@ "emotion": "^10.0.17",

No alert changes

Improved metrics

Total package byte prevSize

84458

increased by5%

Number of package files

8

increased by14.29%

Dependency changes

• Updated@contentful/f36-button@^4.48.1

• Updated@contentful/f36-core@^4.48.1

• Updated@contentful/f36-text-link@^4.48.1

• Updated@contentful/f36-typography@^4.48.1