@contentful/f36-modal - npm Package Compare versions

Comparing version 4.0.1-next-v4-7774.2326 to 4.0.1-next-v4-7888.2327

dist/main.js

@@ -1,2 +0,2 @@
-var e=p(require("@babel/runtime/helpers/extends")),t=p(require("react")),o=p(require("react-modal")),{Box:n,Flex:l}=require("@contentful/f36-core"),{cx:a,css:s}=require("emotion"),{CloseIcon:r}=require("@contentful/f36-icons"),{Button:i,ButtonGroup:c}=require("@contentful/f36-button"),{Subheading:u}=require("@contentful/f36-typography"),d=p(require("@contentful/f36-tokens")),f=p(require("react-dom"));function m(e,t,o,n){Object.defineProperty(e,t,{get:o,set:n,enumerable:!0,configurable:!0})}function p(e){return e&&e.__esModule?e.default:e}var h={};function C({onClose:o,title:n,testId:c="cf-ui-modal-header",className:f,...m}){const p={root:s({padding:`${d.spacingM} ${d.spacingM} ${d.spacingM} ${d.spacingL}`,borderRadius:`${d.borderRadiusMedium} ${d.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${d.gray300}`},"")};return t.createElement(l,e({},m,{className:a(p.root,f),testId:c,alignItems:"center",justifyContent:"space-between"}),t.createElement(u,{as:"h1",isTruncated:!0,marginBottom:"none"},n),o&&t.createElement(i,{variant:"transparent","aria-label":"Close",icon:t.createElement(r,{size:"small"}),onClick:()=>{o()},size:"small"}))}function y({testId:o="cf-ui-modal-content",className:l,children:r,...i}){const c={root:s({padding:`${d.spacingM} ${d.spacingL}`,color:d.gray700,fontSize:d.fontSizeM,fontFamily:d.fontStackPrimary,lineHeight:d.lineHeightDefault,overflowY:"auto",overflowX:"hidden"},"")};return t.createElement(n,e({},i,{as:"div",className:a(c.root,l),testId:o}),r)}function g({testId:o="cf-ui-modal-controls",className:n,children:a,...s}){return t.createElement(l,e({},s,{className:n,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),t.createElement(c,{variant:"spaced",spacing:"spacingXs"},a))}m(h,"Modal",(()=>b)),m(h,"ModalConfirm",(()=>O)),m(h,"ModalContent",(()=>y)),m(h,"ModalControls",(()=>g)),m(h,"ModalHeader",(()=>C)),m(h,"ModalLauncher",(()=>x));const w={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function b({allowHeightOverflow:l,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:u,testId:f,topOffset:m,aria:p,...h}){const g=t.useRef(null),b={...h,allowHeightOverflow:l,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:u,testId:f,topOffset:m},O=function(e){const t=a(s({transition:`opacity ${d.transitionDurationLong} ${d.transitionEasingDefault}, transform ${d.transitionDurationDefault} ${d.transitionEasingCubicBezier}`,opacity:"0.5",margin:d.spacing2Xl,transform:"scale(0.85)",backgroundColor:d.colorWhite,borderRadius:d.borderRadiusMedium,boxShadow:d.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${d.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${d.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"},""),e.allowHeightOverflow?s({name:"1evlo53",styles:"overflow:auto;max-height:none;"}):null,"zen"===e.size?s({name:"11c88st",styles:"max-width:none;max-height:none;margin:0;height:100%;width:100%;"}):null,e.className);return{portal:s({name:"13o7eu2",styles:"display:block;"}),base:{root:a(s({zIndex:d.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none"},""),"zen"===e.size?s({name:"uwwqev",styles:"width:100%;height:100%;"}):null),afterOpen:s({name:"rdgc1",styles:"[data-modal-root]{transform:scale(1);opacity:1;}"}),beforeClose:s({name:"e66ys1",styles:"[data-modal-root]{opacity:0.5;transform:scale(0.85);}"})},modalOverlay:{root:a(s({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:d.zIndexModal,opacity:0,transition:`opacity ${d.transitionDurationDefault} ${d.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center"},""),"center"===e.position?s({name:"1qe4tyl",styles:"align-items:center;justify-content:center;"}):null),afterOpen:s({name:"whh5e5",styles:"opacity:1;"}),beforeClose:s({name:"q7lffx",styles:"opacity:0;"})},modal:t}}({position:r,size:u,allowHeightOverflow:l,className:h.className});t.useEffect((()=>{b.isShown&&setTimeout((()=>{b.initialFocusRef&&b.initialFocusRef.current?b.initialFocusRef.current.focus&&b.initialFocusRef.current.focus():g.current&&function(e){if(e&&e.querySelectorAll){const t=e.querySelectorAll("input, button");if(t.length>0){const e=t[0];"function"==typeof e.focus&&e.focus()}}}(g.current)}),100)}),[b.isShown,b.initialFocusRef]);return t.createElement(o,{ariaHideApp:!1,aria:p,onRequestClose:b.onClose,isOpen:h.isShown,onAfterOpen:b.onAfterOpen,shouldCloseOnEsc:i,shouldCloseOnOverlayClick:c,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:O.portal,className:{base:O.base.root,afterOpen:O.base.afterOpen,beforeClose:O.base.beforeClose},style:{content:{top:"center"===r?0:m}},overlayClassName:{base:O.modalOverlay.root,afterOpen:O.modalOverlay.afterOpen,beforeClose:O.modalOverlay.beforeClose},closeTimeoutMS:300,contentRef:e=>{g.current=e}},t.createElement(n,{testId:f,style:{width:w[u]||u},className:O.modal,"data-modal-root":!0},"function"==typeof h.children?h.children(b):t.createElement(t.Fragment,null,h.title&&t.createElement(C,e({title:h.title,onClose:b.onClose},h.modalHeaderProps)),t.createElement(y,h.modalContentProps,h.children))))}function O({allowHeightOverflow:o=!1,cancelLabel:n="Cancel",cancelTestId:l="cf-ui-modal-confirm-cancel-button",children:a,confirmLabel:s="Confirm",confirmTestId:r="cf-ui-modal-confirm-confirm-button",intent:c="positive",isConfirmDisabled:u=!1,isConfirmLoading:d=!1,isShown:f,modalContentProps:m,modalControlsProps:p,modalHeaderProps:h,onCancel:C,onConfirm:y,shouldCloseOnEscapePress:g=!0,shouldCloseOnOverlayClick:w=!0,size:O="medium",testId:v="cf-ui-modal-confirm",title:E="Are you sure?",initialFocusRef:x}){const I=t.useRef(null),z=s?t.createElement(i,{testId:r,isDisabled:u,isLoading:d,variant:c,size:"small",onClick:()=>y()},s):null,M=n?t.createElement(i,{testId:l,variant:"secondary",onClick:C,size:"small",ref:x||I},n):null;return t.createElement(b,{testId:v,isShown:f,onClose:C,size:O,shouldCloseOnOverlayClick:w,shouldCloseOnEscapePress:g,allowHeightOverflow:o,initialFocusRef:I},(()=>t.createElement(t.Fragment,null,t.createElement(b.Header,e({title:E||""},h)),t.createElement(b.Content,m,a),t.createElement(b.Controls,p,M,z))))}b.Header=C,b.Content=y,b.Controls=g,b.defaultProps={allowHeightOverflow:!1,position:"center",shouldCloseOnEscapePress:!0,shouldCloseOnOverlayClick:!0,size:"medium",testId:"cf-ui-modal",topOffset:"50px"};const v=e=>{let t=document.getElementById(e);return null!==t||(t=document.createElement("div"),t.setAttribute("id",e),document.body.appendChild(t)),t},E=new Map;const x={open:function(e,t={}){const o=`modals-root${(t={delay:300,...t}).modalId||Date.now()}`,n=v(o);return new Promise((l=>{let a={onClose:async function(e){a={...a,isShown:!1},s(a),await new Promise((e=>setTimeout(e,t.delay))),f.unmountComponentAtNode(n),n.remove(),E.delete(o),l(e)},isShown:!0};function s({onClose:t,isShown:o}){f.render(e({onClose:t,isShown:o}),n)}s(a),E.set(o,{render:s,currentConfig:a,delay:t.delay})}))},closeAll:function(){E.forEach((async({render:e,currentConfig:t,delay:o},n)=>{e({...t,isShown:!1}),await new Promise((e=>setTimeout(e,o))),f.unmountComponentAtNode(v(n)),E.delete(n)}))}};var I,z;I=module.exports,z=h,Object.keys(z).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return z[e]}})}));
+var e=p(require("@babel/runtime/helpers/extends")),t=p(require("react")),o=p(require("react-modal")),{Box:n,Flex:l}=require("@contentful/f36-core"),{cx:a,css:s}=require("emotion"),{CloseIcon:r}=require("@contentful/f36-icons"),{Button:i,ButtonGroup:c}=require("@contentful/f36-button"),{Subheading:u}=require("@contentful/f36-typography"),d=p(require("@contentful/f36-tokens")),f=p(require("react-dom"));function m(e,t,o,n){Object.defineProperty(e,t,{get:o,set:n,enumerable:!0,configurable:!0})}function p(e){return e&&e.__esModule?e.default:e}var h={};function C({onClose:o,title:n,testId:c="cf-ui-modal-header",className:f,...m}){const p={root:s({padding:`${d.spacingM} ${d.spacingM} ${d.spacingM} ${d.spacingL}`,borderRadius:`${d.borderRadiusMedium} ${d.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${d.gray300}`},"")};return t.createElement(l,e({},m,{className:a(p.root,f),testId:c,alignItems:"center",justifyContent:"space-between"}),t.createElement(u,{as:"h1",isTruncated:!0,marginBottom:"none"},n),o&&t.createElement(i,{variant:"transparent","aria-label":"Close",icon:t.createElement(r,{size:"small"}),onClick:()=>{o()},size:"small"}))}function y({testId:o="cf-ui-modal-content",className:l,children:r,...i}){const c={root:s({padding:`${d.spacingM} ${d.spacingL}`,color:d.gray700,fontSize:d.fontSizeM,fontFamily:d.fontStackPrimary,lineHeight:d.lineHeightM,overflowY:"auto",overflowX:"hidden"},"")};return t.createElement(n,e({},i,{as:"div",className:a(c.root,l),testId:o}),r)}function g({testId:o="cf-ui-modal-controls",className:n,children:a,...s}){return t.createElement(l,e({},s,{className:n,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),t.createElement(c,{variant:"spaced",spacing:"spacingXs"},a))}m(h,"Modal",(()=>b)),m(h,"ModalConfirm",(()=>O)),m(h,"ModalContent",(()=>y)),m(h,"ModalControls",(()=>g)),m(h,"ModalHeader",(()=>C)),m(h,"ModalLauncher",(()=>x));const w={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function b({allowHeightOverflow:l,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:u,testId:f,topOffset:m,aria:p,...h}){const g=t.useRef(null),b={...h,allowHeightOverflow:l,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:u,testId:f,topOffset:m},O=function(e){const t=a(s({transition:`opacity ${d.transitionDurationLong} ${d.transitionEasingDefault}, transform ${d.transitionDurationDefault} ${d.transitionEasingCubicBezier}`,opacity:"0.5",margin:d.spacing2Xl,transform:"scale(0.85)",backgroundColor:d.colorWhite,borderRadius:d.borderRadiusMedium,boxShadow:d.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${d.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${d.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"},""),e.allowHeightOverflow?s({name:"1evlo53",styles:"overflow:auto;max-height:none;"}):null,"zen"===e.size?s({name:"11c88st",styles:"max-width:none;max-height:none;margin:0;height:100%;width:100%;"}):null,e.className);return{portal:s({name:"13o7eu2",styles:"display:block;"}),base:{root:a(s({zIndex:d.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none"},""),"zen"===e.size?s({name:"uwwqev",styles:"width:100%;height:100%;"}):null),afterOpen:s({name:"rdgc1",styles:"[data-modal-root]{transform:scale(1);opacity:1;}"}),beforeClose:s({name:"e66ys1",styles:"[data-modal-root]{opacity:0.5;transform:scale(0.85);}"})},modalOverlay:{root:a(s({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:d.zIndexModal,opacity:0,transition:`opacity ${d.transitionDurationDefault} ${d.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center"},""),"center"===e.position?s({name:"1qe4tyl",styles:"align-items:center;justify-content:center;"}):null),afterOpen:s({name:"whh5e5",styles:"opacity:1;"}),beforeClose:s({name:"q7lffx",styles:"opacity:0;"})},modal:t}}({position:r,size:u,allowHeightOverflow:l,className:h.className});t.useEffect((()=>{b.isShown&&setTimeout((()=>{b.initialFocusRef&&b.initialFocusRef.current?b.initialFocusRef.current.focus&&b.initialFocusRef.current.focus():g.current&&function(e){if(e&&e.querySelectorAll){const t=e.querySelectorAll("input, button");if(t.length>0){const e=t[0];"function"==typeof e.focus&&e.focus()}}}(g.current)}),100)}),[b.isShown,b.initialFocusRef]);return t.createElement(o,{ariaHideApp:!1,aria:p,onRequestClose:b.onClose,isOpen:h.isShown,onAfterOpen:b.onAfterOpen,shouldCloseOnEsc:i,shouldCloseOnOverlayClick:c,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:O.portal,className:{base:O.base.root,afterOpen:O.base.afterOpen,beforeClose:O.base.beforeClose},style:{content:{top:"center"===r?0:m}},overlayClassName:{base:O.modalOverlay.root,afterOpen:O.modalOverlay.afterOpen,beforeClose:O.modalOverlay.beforeClose},closeTimeoutMS:300,contentRef:e=>{g.current=e}},t.createElement(n,{testId:f,style:{width:w[u]||u},className:O.modal,"data-modal-root":!0},"function"==typeof h.children?h.children(b):t.createElement(t.Fragment,null,h.title&&t.createElement(C,e({title:h.title,onClose:b.onClose},h.modalHeaderProps)),t.createElement(y,h.modalContentProps,h.children))))}function O({allowHeightOverflow:o=!1,cancelLabel:n="Cancel",cancelTestId:l="cf-ui-modal-confirm-cancel-button",children:a,confirmLabel:s="Confirm",confirmTestId:r="cf-ui-modal-confirm-confirm-button",intent:c="positive",isConfirmDisabled:u=!1,isConfirmLoading:d=!1,isShown:f,modalContentProps:m,modalControlsProps:p,modalHeaderProps:h,onCancel:C,onConfirm:y,shouldCloseOnEscapePress:g=!0,shouldCloseOnOverlayClick:w=!0,size:O="medium",testId:v="cf-ui-modal-confirm",title:E="Are you sure?",initialFocusRef:x}){const I=t.useRef(null),z=s?t.createElement(i,{testId:r,isDisabled:u,isLoading:d,variant:c,size:"small",onClick:()=>y()},s):null,M=n?t.createElement(i,{testId:l,variant:"secondary",onClick:C,size:"small",ref:x||I},n):null;return t.createElement(b,{testId:v,isShown:f,onClose:C,size:O,shouldCloseOnOverlayClick:w,shouldCloseOnEscapePress:g,allowHeightOverflow:o,initialFocusRef:I},(()=>t.createElement(t.Fragment,null,t.createElement(b.Header,e({title:E||""},h)),t.createElement(b.Content,m,a),t.createElement(b.Controls,p,M,z))))}b.Header=C,b.Content=y,b.Controls=g,b.defaultProps={allowHeightOverflow:!1,position:"center",shouldCloseOnEscapePress:!0,shouldCloseOnOverlayClick:!0,size:"medium",testId:"cf-ui-modal",topOffset:"50px"};const v=e=>{let t=document.getElementById(e);return null!==t||(t=document.createElement("div"),t.setAttribute("id",e),document.body.appendChild(t)),t},E=new Map;const x={open:function(e,t={}){const o=`modals-root${(t={delay:300,...t}).modalId||Date.now()}`,n=v(o);return new Promise((l=>{let a={onClose:async function(e){a={...a,isShown:!1},s(a),await new Promise((e=>setTimeout(e,t.delay))),f.unmountComponentAtNode(n),n.remove(),E.delete(o),l(e)},isShown:!0};function s({onClose:t,isShown:o}){f.render(e({onClose:t,isShown:o}),n)}s(a),E.set(o,{render:s,currentConfig:a,delay:t.delay})}))},closeAll:function(){E.forEach((async({render:e,currentConfig:t,delay:o},n)=>{e({...t,isShown:!1}),await new Promise((e=>setTimeout(e,o))),f.unmountComponentAtNode(v(n)),E.delete(n)}))}};var I,z;I=module.exports,z=h,Object.keys(z).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return z[e]}})}));
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import e from"@babel/runtime/helpers/esm/extends";import o from"react";import t from"react-modal";import{Box as n,Flex as a}from"@contentful/f36-core";import{cx as l,css as s}from"emotion";import{CloseIcon as r}from"@contentful/f36-icons";import{Button as i,ButtonGroup as c}from"@contentful/f36-button";import{Subheading as d}from"@contentful/f36-typography";import m from"@contentful/f36-tokens";import u from"react-dom";function f(e,o,t,n){Object.defineProperty(e,o,{get:t,set:n,enumerable:!0,configurable:!0})}var p={};function h({onClose:t,title:n,testId:c="cf-ui-modal-header",className:u,...f}){const p={root:s({padding:`${m.spacingM} ${m.spacingM} ${m.spacingM} ${m.spacingL}`,borderRadius:`${m.borderRadiusMedium} ${m.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${m.gray300}`},"")};return o.createElement(a,e({},f,{className:l(p.root,u),testId:c,alignItems:"center",justifyContent:"space-between"}),o.createElement(d,{as:"h1",isTruncated:!0,marginBottom:"none"},n),t&&o.createElement(i,{variant:"transparent","aria-label":"Close",icon:o.createElement(r,{size:"small"}),onClick:()=>{t()},size:"small"}))}function C({testId:t="cf-ui-modal-content",className:a,children:r,...i}){const c={root:s({padding:`${m.spacingM} ${m.spacingL}`,color:m.gray700,fontSize:m.fontSizeM,fontFamily:m.fontStackPrimary,lineHeight:m.lineHeightDefault,overflowY:"auto",overflowX:"hidden"},"")};return o.createElement(n,e({},i,{as:"div",className:l(c.root,a),testId:t}),r)}function g({testId:t="cf-ui-modal-controls",className:n,children:l,...s}){return o.createElement(a,e({},s,{className:n,testId:t,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),o.createElement(c,{variant:"spaced",spacing:"spacingXs"},l))}f(p,"Modal",(()=>w)),f(p,"ModalConfirm",(()=>b)),f(p,"ModalContent",(()=>C)),f(p,"ModalControls",(()=>g)),f(p,"ModalHeader",(()=>h)),f(p,"ModalLauncher",(()=>E));const y={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function w({allowHeightOverflow:a,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:d,testId:u,topOffset:f,aria:p,...g}){const w=o.useRef(null),b={...g,allowHeightOverflow:a,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:d,testId:u,topOffset:f},O=function(e){const o=l(s({transition:`opacity ${m.transitionDurationLong} ${m.transitionEasingDefault}, transform ${m.transitionDurationDefault} ${m.transitionEasingCubicBezier}`,opacity:"0.5",margin:m.spacing2Xl,transform:"scale(0.85)",backgroundColor:m.colorWhite,borderRadius:m.borderRadiusMedium,boxShadow:m.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${m.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${m.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"},""),e.allowHeightOverflow?s({name:"1evlo53",styles:"overflow:auto;max-height:none;"}):null,"zen"===e.size?s({name:"11c88st",styles:"max-width:none;max-height:none;margin:0;height:100%;width:100%;"}):null,e.className);return{portal:s({name:"13o7eu2",styles:"display:block;"}),base:{root:l(s({zIndex:m.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none"},""),"zen"===e.size?s({name:"uwwqev",styles:"width:100%;height:100%;"}):null),afterOpen:s({name:"rdgc1",styles:"[data-modal-root]{transform:scale(1);opacity:1;}"}),beforeClose:s({name:"e66ys1",styles:"[data-modal-root]{opacity:0.5;transform:scale(0.85);}"})},modalOverlay:{root:l(s({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:m.zIndexModal,opacity:0,transition:`opacity ${m.transitionDurationDefault} ${m.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center"},""),"center"===e.position?s({name:"1qe4tyl",styles:"align-items:center;justify-content:center;"}):null),afterOpen:s({name:"whh5e5",styles:"opacity:1;"}),beforeClose:s({name:"q7lffx",styles:"opacity:0;"})},modal:o}}({position:r,size:d,allowHeightOverflow:a,className:g.className});o.useEffect((()=>{b.isShown&&setTimeout((()=>{b.initialFocusRef&&b.initialFocusRef.current?b.initialFocusRef.current.focus&&b.initialFocusRef.current.focus():w.current&&function(e){if(e&&e.querySelectorAll){const o=e.querySelectorAll("input, button");if(o.length>0){const e=o[0];"function"==typeof e.focus&&e.focus()}}}(w.current)}),100)}),[b.isShown,b.initialFocusRef]);return o.createElement(t,{ariaHideApp:!1,aria:p,onRequestClose:b.onClose,isOpen:g.isShown,onAfterOpen:b.onAfterOpen,shouldCloseOnEsc:i,shouldCloseOnOverlayClick:c,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:O.portal,className:{base:O.base.root,afterOpen:O.base.afterOpen,beforeClose:O.base.beforeClose},style:{content:{top:"center"===r?0:f}},overlayClassName:{base:O.modalOverlay.root,afterOpen:O.modalOverlay.afterOpen,beforeClose:O.modalOverlay.beforeClose},closeTimeoutMS:300,contentRef:e=>{w.current=e}},o.createElement(n,{testId:u,style:{width:y[d]||d},className:O.modal,"data-modal-root":!0},"function"==typeof g.children?g.children(b):o.createElement(o.Fragment,null,g.title&&o.createElement(h,e({title:g.title,onClose:b.onClose},g.modalHeaderProps)),o.createElement(C,g.modalContentProps,g.children))))}function b({allowHeightOverflow:t=!1,cancelLabel:n="Cancel",cancelTestId:a="cf-ui-modal-confirm-cancel-button",children:l,confirmLabel:s="Confirm",confirmTestId:r="cf-ui-modal-confirm-confirm-button",intent:c="positive",isConfirmDisabled:d=!1,isConfirmLoading:m=!1,isShown:u,modalContentProps:f,modalControlsProps:p,modalHeaderProps:h,onCancel:C,onConfirm:g,shouldCloseOnEscapePress:y=!0,shouldCloseOnOverlayClick:b=!0,size:O="medium",testId:v="cf-ui-modal-confirm",title:E="Are you sure?",initialFocusRef:x}){const I=o.useRef(null),M=s?o.createElement(i,{testId:r,isDisabled:d,isLoading:m,variant:c,size:"small",onClick:()=>g()},s):null,z=n?o.createElement(i,{testId:a,variant:"secondary",onClick:C,size:"small",ref:x||I},n):null;return o.createElement(w,{testId:v,isShown:u,onClose:C,size:O,shouldCloseOnOverlayClick:b,shouldCloseOnEscapePress:y,allowHeightOverflow:t,initialFocusRef:I},(()=>o.createElement(o.Fragment,null,o.createElement(w.Header,e({title:E||""},h)),o.createElement(w.Content,f,l),o.createElement(w.Controls,p,z,M))))}w.Header=h,w.Content=C,w.Controls=g,w.defaultProps={allowHeightOverflow:!1,position:"center",shouldCloseOnEscapePress:!0,shouldCloseOnOverlayClick:!0,size:"medium",testId:"cf-ui-modal",topOffset:"50px"};const O=e=>{let o=document.getElementById(e);return null!==o||(o=document.createElement("div"),o.setAttribute("id",e),document.body.appendChild(o)),o},v=new Map;const E={open:function(e,o={}){const t=`modals-root${(o={delay:300,...o}).modalId||Date.now()}`,n=O(t);return new Promise((a=>{let l={onClose:async function(e){l={...l,isShown:!1},s(l),await new Promise((e=>setTimeout(e,o.delay))),u.unmountComponentAtNode(n),n.remove(),v.delete(t),a(e)},isShown:!0};function s({onClose:o,isShown:t}){u.render(e({onClose:o,isShown:t}),n)}s(l),v.set(t,{render:s,currentConfig:l,delay:o.delay})}))},closeAll:function(){v.forEach((async({render:e,currentConfig:o,delay:t},n)=>{e({...o,isShown:!1}),await new Promise((e=>setTimeout(e,t))),u.unmountComponentAtNode(O(n)),v.delete(n)}))}};export{w as Modal,b as ModalConfirm,C as ModalContent,g as ModalControls,h as ModalHeader,E as ModalLauncher};
+import e from"@babel/runtime/helpers/esm/extends";import o from"react";import t from"react-modal";import{Box as n,Flex as a}from"@contentful/f36-core";import{cx as l,css as s}from"emotion";import{CloseIcon as r}from"@contentful/f36-icons";import{Button as i,ButtonGroup as c}from"@contentful/f36-button";import{Subheading as d}from"@contentful/f36-typography";import m from"@contentful/f36-tokens";import u from"react-dom";function f(e,o,t,n){Object.defineProperty(e,o,{get:t,set:n,enumerable:!0,configurable:!0})}var p={};function h({onClose:t,title:n,testId:c="cf-ui-modal-header",className:u,...f}){const p={root:s({padding:`${m.spacingM} ${m.spacingM} ${m.spacingM} ${m.spacingL}`,borderRadius:`${m.borderRadiusMedium} ${m.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${m.gray300}`},"")};return o.createElement(a,e({},f,{className:l(p.root,u),testId:c,alignItems:"center",justifyContent:"space-between"}),o.createElement(d,{as:"h1",isTruncated:!0,marginBottom:"none"},n),t&&o.createElement(i,{variant:"transparent","aria-label":"Close",icon:o.createElement(r,{size:"small"}),onClick:()=>{t()},size:"small"}))}function C({testId:t="cf-ui-modal-content",className:a,children:r,...i}){const c={root:s({padding:`${m.spacingM} ${m.spacingL}`,color:m.gray700,fontSize:m.fontSizeM,fontFamily:m.fontStackPrimary,lineHeight:m.lineHeightM,overflowY:"auto",overflowX:"hidden"},"")};return o.createElement(n,e({},i,{as:"div",className:l(c.root,a),testId:t}),r)}function g({testId:t="cf-ui-modal-controls",className:n,children:l,...s}){return o.createElement(a,e({},s,{className:n,testId:t,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),o.createElement(c,{variant:"spaced",spacing:"spacingXs"},l))}f(p,"Modal",(()=>w)),f(p,"ModalConfirm",(()=>b)),f(p,"ModalContent",(()=>C)),f(p,"ModalControls",(()=>g)),f(p,"ModalHeader",(()=>h)),f(p,"ModalLauncher",(()=>E));const y={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function w({allowHeightOverflow:a,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:d,testId:u,topOffset:f,aria:p,...g}){const w=o.useRef(null),b={...g,allowHeightOverflow:a,position:r,shouldCloseOnEscapePress:i,shouldCloseOnOverlayClick:c,size:d,testId:u,topOffset:f},O=function(e){const o=l(s({transition:`opacity ${m.transitionDurationLong} ${m.transitionEasingDefault}, transform ${m.transitionDurationDefault} ${m.transitionEasingCubicBezier}`,opacity:"0.5",margin:m.spacing2Xl,transform:"scale(0.85)",backgroundColor:m.colorWhite,borderRadius:m.borderRadiusMedium,boxShadow:m.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${m.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${m.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"},""),e.allowHeightOverflow?s({name:"1evlo53",styles:"overflow:auto;max-height:none;"}):null,"zen"===e.size?s({name:"11c88st",styles:"max-width:none;max-height:none;margin:0;height:100%;width:100%;"}):null,e.className);return{portal:s({name:"13o7eu2",styles:"display:block;"}),base:{root:l(s({zIndex:m.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none"},""),"zen"===e.size?s({name:"uwwqev",styles:"width:100%;height:100%;"}):null),afterOpen:s({name:"rdgc1",styles:"[data-modal-root]{transform:scale(1);opacity:1;}"}),beforeClose:s({name:"e66ys1",styles:"[data-modal-root]{opacity:0.5;transform:scale(0.85);}"})},modalOverlay:{root:l(s({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:m.zIndexModal,opacity:0,transition:`opacity ${m.transitionDurationDefault} ${m.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center"},""),"center"===e.position?s({name:"1qe4tyl",styles:"align-items:center;justify-content:center;"}):null),afterOpen:s({name:"whh5e5",styles:"opacity:1;"}),beforeClose:s({name:"q7lffx",styles:"opacity:0;"})},modal:o}}({position:r,size:d,allowHeightOverflow:a,className:g.className});o.useEffect((()=>{b.isShown&&setTimeout((()=>{b.initialFocusRef&&b.initialFocusRef.current?b.initialFocusRef.current.focus&&b.initialFocusRef.current.focus():w.current&&function(e){if(e&&e.querySelectorAll){const o=e.querySelectorAll("input, button");if(o.length>0){const e=o[0];"function"==typeof e.focus&&e.focus()}}}(w.current)}),100)}),[b.isShown,b.initialFocusRef]);return o.createElement(t,{ariaHideApp:!1,aria:p,onRequestClose:b.onClose,isOpen:g.isShown,onAfterOpen:b.onAfterOpen,shouldCloseOnEsc:i,shouldCloseOnOverlayClick:c,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:O.portal,className:{base:O.base.root,afterOpen:O.base.afterOpen,beforeClose:O.base.beforeClose},style:{content:{top:"center"===r?0:f}},overlayClassName:{base:O.modalOverlay.root,afterOpen:O.modalOverlay.afterOpen,beforeClose:O.modalOverlay.beforeClose},closeTimeoutMS:300,contentRef:e=>{w.current=e}},o.createElement(n,{testId:u,style:{width:y[d]||d},className:O.modal,"data-modal-root":!0},"function"==typeof g.children?g.children(b):o.createElement(o.Fragment,null,g.title&&o.createElement(h,e({title:g.title,onClose:b.onClose},g.modalHeaderProps)),o.createElement(C,g.modalContentProps,g.children))))}function b({allowHeightOverflow:t=!1,cancelLabel:n="Cancel",cancelTestId:a="cf-ui-modal-confirm-cancel-button",children:l,confirmLabel:s="Confirm",confirmTestId:r="cf-ui-modal-confirm-confirm-button",intent:c="positive",isConfirmDisabled:d=!1,isConfirmLoading:m=!1,isShown:u,modalContentProps:f,modalControlsProps:p,modalHeaderProps:h,onCancel:C,onConfirm:g,shouldCloseOnEscapePress:y=!0,shouldCloseOnOverlayClick:b=!0,size:O="medium",testId:v="cf-ui-modal-confirm",title:E="Are you sure?",initialFocusRef:x}){const I=o.useRef(null),M=s?o.createElement(i,{testId:r,isDisabled:d,isLoading:m,variant:c,size:"small",onClick:()=>g()},s):null,z=n?o.createElement(i,{testId:a,variant:"secondary",onClick:C,size:"small",ref:x||I},n):null;return o.createElement(w,{testId:v,isShown:u,onClose:C,size:O,shouldCloseOnOverlayClick:b,shouldCloseOnEscapePress:y,allowHeightOverflow:t,initialFocusRef:I},(()=>o.createElement(o.Fragment,null,o.createElement(w.Header,e({title:E||""},h)),o.createElement(w.Content,f,l),o.createElement(w.Controls,p,z,M))))}w.Header=h,w.Content=C,w.Controls=g,w.defaultProps={allowHeightOverflow:!1,position:"center",shouldCloseOnEscapePress:!0,shouldCloseOnOverlayClick:!0,size:"medium",testId:"cf-ui-modal",topOffset:"50px"};const O=e=>{let o=document.getElementById(e);return null!==o||(o=document.createElement("div"),o.setAttribute("id",e),document.body.appendChild(o)),o},v=new Map;const E={open:function(e,o={}){const t=`modals-root${(o={delay:300,...o}).modalId||Date.now()}`,n=O(t);return new Promise((a=>{let l={onClose:async function(e){l={...l,isShown:!1},s(l),await new Promise((e=>setTimeout(e,o.delay))),u.unmountComponentAtNode(n),n.remove(),v.delete(t),a(e)},isShown:!0};function s({onClose:o,isShown:t}){u.render(e({onClose:o,isShown:t}),n)}s(l),v.set(t,{render:s,currentConfig:l,delay:o.delay})}))},closeAll:function(){v.forEach((async({render:e,currentConfig:o,delay:t},n)=>{e({...o,isShown:!1}),await new Promise((e=>setTimeout(e,t))),u.unmountComponentAtNode(O(n)),v.delete(n)}))}};export{w as Modal,b as ModalConfirm,C as ModalContent,g as ModalControls,h as ModalHeader,E as ModalLauncher};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-modal",
-  "version": "4.0.1-next-v4-7774.2326+08efe182",
+  "version": "4.0.1-next-v4-7888.2327+80436ab5",
   "description": "Forma 36: Modal component",
@@ -10,7 +10,7 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-button": "4.0.1-next-v4-7774.2326+08efe182",
-    "@contentful/f36-core": "4.0.1-next-v4-7774.2326+08efe182",
-    "@contentful/f36-icons": "4.0.1-next-v4-7774.2326+08efe182",
-    "@contentful/f36-tokens": "4.0.1-next-v4-7774.2326+08efe182",
-    "@contentful/f36-typography": "4.0.1-next-v4-7774.2326+08efe182",
+    "@contentful/f36-button": "4.0.1-next-v4-7888.2327+80436ab5",
+    "@contentful/f36-core": "4.0.1-next-v4-7888.2327+80436ab5",
+    "@contentful/f36-icons": "4.0.1-next-v4-7888.2327+80436ab5",
+    "@contentful/f36-tokens": "4.0.1-next-v4-7888.2327+80436ab5",
+    "@contentful/f36-typography": "4.0.1-next-v4-7888.2327+80436ab5",
     "@types/react-modal": "^3.12.1",
@@ -41,3 +41,3 @@ "emotion": "^10.0.17",
   },
-  "gitHead": "08efe182d6b4ee532be91cfbf86b2c3ba2f9f474"
+  "gitHead": "80436ab578ab2f0cab639f0c819f7f229d63feb5"
 }

src/ModalContent/ModalContent.styles.ts

@@ -11,3 +11,3 @@ import { css } from 'emotion';
       fontFamily: tokens.fontStackPrimary,
-      lineHeight: tokens.lineHeightDefault,
+      lineHeight: tokens.lineHeightM,
       overflowY: 'auto',
@@ -14,0 +14,0 @@ overflowX: 'hidden',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Worsened metrics

Total package byte prevSize

234555

decreased by-0.03%

Dependency changes

• Updated@contentful/f36-button@4.0.1-next-v4-7888.2327+80436ab5

• Updated@contentful/f36-core@4.0.1-next-v4-7888.2327+80436ab5

• Updated@contentful/f36-icons@4.0.1-next-v4-7888.2327+80436ab5

• Updated@contentful/f36-tokens@4.0.1-next-v4-7888.2327+80436ab5

• Updated@contentful/f36-typography@4.0.1-next-v4-7888.2327+80436ab5