Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@contentful/f36-modal

Package Overview
Dependencies
Maintainers
5
Versions
352
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-modal - npm Package Compare versions

Comparing version 4.67.3 to 4.67.4

2

dist/esm/index.js

@@ -12,3 +12,3 @@ import * as x from 'react';

var ro=Object.defineProperty,ao=Object.defineProperties;var lo=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable;var G=(o,e,t)=>e in o?ro(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,s=(o,e)=>{for(var t in e||(e={}))Y.call(e,t)&&G(o,t,e[t]);if(E)for(var t of E(e))J.call(e,t)&&G(o,t,e[t]);return o},c=(o,e)=>ao(o,lo(e));var h=(o,e)=>{var t={};for(var r in o)Y.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&E)for(var r of E(o))e.indexOf(r)<0&&J.call(o,r)&&(t[r]=o[r]);return t};var A=(o,e,t)=>new Promise((r,i)=>{var a=n=>{try{M(t.next(n));}catch(p){i(p);}},l=n=>{try{M(t.throw(n));}catch(p){i(p);}},M=n=>n.done?r(n.value):Promise.resolve(n.value).then(a,l);M((t=t.apply(o,e)).next());});function Q(){return {root:css({position:"relative",padding:`${d.spacingM} ${d.spacingM} ${d.spacingM} ${d.spacingL}`,borderRadius:`${d.borderRadiusMedium} ${d.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${d.gray300}`}),buttonContainer:css({position:"relative",width:d.spacing2Xl,height:d.spacingL,button:{position:"absolute",top:`calc(-1 * ${d.spacing2Xs})`,right:0}})}}var R=M=>{var n=M,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:i,children:a}=n,l=h(n,["onClose","title","subtitle","testId","className","children"]);let p=Q();return x__default.createElement(Flex,c(s({},l),{className:cx(p.root,i),testId:r,alignItems:"center",justifyContent:"space-between"}),x__default.createElement(Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e,t&&x__default.createElement(Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),a,o&&x__default.createElement(Flex,{alignItems:"center",className:p.buttonContainer},x__default.createElement(IconButton,{variant:"transparent","aria-label":"Close",size:"small",icon:x__default.createElement(CloseIcon,{size:"small"}),onClick:()=>{o();}})))};R.displayName="ModalHeader";function V(){return {root:css({padding:`${d.spacingM} ${d.spacingL}`,color:d.gray700,fontSize:d.fontSizeM,fontFamily:d.fontStackPrimary,lineHeight:d.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var w=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=V();return x__default.createElement(Box,c(s({},r),{as:"div",className:cx(l.root,e),testId:o}),t)};w.displayName="ModalContent";function Z(o){let e=cx(css({backgroundColor:d.colorWhite,borderRadius:o.size==="zen"?0: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"}),o.allowHeightOverflow?css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?css({maxWidth:`calc(100vw - ${d.spacingXl})`,maxHeight:`calc(100vh - ${d.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:css({display:"block"}),base:{root:cx(css({zIndex:d.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none",transform:o.size==="zen"?"scale(1)":"scale(0.85)",transition:`transform ${d.transitionDurationDefault} ${d.transitionEasingDefault}`}),o.size==="zen"?css({width:"100%",height:"100%"}):null),afterOpen:css({transform:"scale(1) !important"}),beforeClose:css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:cx(css({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",padding:d.spacing2Xl}),o.size==="fullscreen"?css({padding:0}):null,o.position==="center"?css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css({opacity:"1 !important"}),beforeClose:css({opacity:"0 !important"})},modal:e}}var xo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function Po(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=p=>{var S=p,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:r=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:l="50px",aria:M}=S,n=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var L,N;let z=x.useRef(null),P=c(s({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:i,testId:a,topOffset:l}),f=Z({position:e,size:i,allowHeightOverflow:o,className:n.className,overlayClassName:(L=n.overlayProps)==null?void 0:L.className}),k=()=>{var O,T;let u=z.current;if(u){let I=document.activeElement;if(u!==I&&u.contains(I))return}let b=(O=P.initialFocusRef)==null?void 0:O.current;b?(T=b.focus)==null||T.call(b):u&&Po(u);},F=(...u)=>{P.onAfterOpen&&P.onAfterOpen(...u),k();},W=()=>x.createElement(x.Fragment,null,n.title&&x.createElement(R,s({title:n.title,subtitle:n.subtitle,onClose:P.onClose},n.modalHeaderProps)),x.createElement(w,s({},n.modalContentProps),n.children));return x.createElement(yo,{ariaHideApp:!1,aria:M,onRequestClose:P.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:f.portal,style:{content:{top:e==="center"?0:l},overlay:(N=n.overlayProps)==null?void 0:N.style},className:{base:f.base.root,afterOpen:f.base.afterOpen,beforeClose:f.base.beforeClose},overlayClassName:{base:f.modalOverlay.root,afterOpen:f.modalOverlay.afterOpen,beforeClose:f.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:u=>{z.current=u;}},x.createElement(Box,{testId:a,style:{width:xo[i]||i},className:f.modal,"data-modal-root":!0},typeof n.children=="function"?n.children(P):W()))};j.displayName="Modal";function _(){return {root:css({borderBottomLeftRadius:d.borderRadiusMedium,borderBottomRightRadius:d.borderRadiusMedium,padding:`${d.spacingS} ${d.spacingM}`,width:"100%",boxSizing:"border-box"})}}var D=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=_();return x__default.createElement(Flex,c(s({},r),{className:cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),x__default.createElement(ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};D.displayName="ModalControls";var g=j;g.Content=w;g.Header=R;g.Controls=D;var to=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:M=!1,isConfirmLoading:n=!1,isShown:p,modalContentProps:S,modalControlsProps:z,modalHeaderProps:P,onCancel:f,onConfirm:k,shouldCloseOnEscapePress:F=!0,shouldCloseOnOverlayClick:W=!0,size:L="medium",testId:N="cf-ui-modal-confirm",title:u="Are you sure?",initialFocusRef:b})=>{let O=x__default.useRef(null),T=i?x__default.createElement(Button,{testId:a,isDisabled:M,isLoading:n,variant:l,size:"small",onClick:()=>k()},i):null,I=e?x__default.createElement(Button,{testId:t,variant:"secondary",onClick:f,size:"small",ref:b||O},e):null;return x__default.createElement(g,{testId:N,isShown:p,onClose:f,size:L,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:O},()=>x__default.createElement(x__default.Fragment,null,x__default.createElement(g.Header,c(s({title:u||""},P),{onClose:f})),x__default.createElement(g.Content,s({},S),r),x__default.createElement(g.Controls,s({},z),I,T)))};to.displayName="ModalConfirm";var no=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},B=new Map;function Ho(){return A(this,null,function*(){yield Promise.all(Array.from(B.entries()).map(i=>A(this,[i],function*([o,{render:e,currentConfig:t,delay:r}]){let a=c(s({},t),{isShown:!1});e(a),yield new Promise(l=>setTimeout(l,r)),q.unmountComponentAtNode(no(o)),B.delete(o);})));})}function wo(o,e={}){e=s({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,r=no(t);return new Promise(i=>{let a={onClose:M,isShown:!0};function l({onClose:n,isShown:p}){q.render(o({onClose:n,isShown:p}),r);}function M(n){return A(this,null,function*(){a=c(s({},a),{isShown:!1}),l(a),yield new Promise(p=>setTimeout(p,e.delay)),q.unmountComponentAtNode(r),r.remove(),B.delete(t),i(n);})}l(a),B.set(t,{render:l,currentConfig:a,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};
var ro=Object.defineProperty,ao=Object.defineProperties;var lo=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable;var G=(o,e,t)=>e in o?ro(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,s=(o,e)=>{for(var t in e||(e={}))Y.call(e,t)&&G(o,t,e[t]);if(E)for(var t of E(e))J.call(e,t)&&G(o,t,e[t]);return o},c=(o,e)=>ao(o,lo(e));var h=(o,e)=>{var t={};for(var r in o)Y.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&E)for(var r of E(o))e.indexOf(r)<0&&J.call(o,r)&&(t[r]=o[r]);return t};var A=(o,e,t)=>new Promise((r,i)=>{var a=n=>{try{M(t.next(n));}catch(p){i(p);}},l=n=>{try{M(t.throw(n));}catch(p){i(p);}},M=n=>n.done?r(n.value):Promise.resolve(n.value).then(a,l);M((t=t.apply(o,e)).next());});function Q(){return {root:css({position:"relative",padding:`${d.spacingM} ${d.spacingM} ${d.spacingM} ${d.spacingL}`,borderRadius:`${d.borderRadiusMedium} ${d.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${d.gray200}`}),buttonContainer:css({position:"relative",width:d.spacing2Xl,height:d.spacingL,button:{position:"absolute",top:`calc(-1 * ${d.spacing2Xs})`,right:0}})}}var R=M=>{var n=M,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:i,children:a}=n,l=h(n,["onClose","title","subtitle","testId","className","children"]);let p=Q();return x__default.createElement(Flex,c(s({},l),{className:cx(p.root,i),testId:r,alignItems:"center",justifyContent:"space-between"}),x__default.createElement(Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e,t&&x__default.createElement(Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),a,o&&x__default.createElement(Flex,{alignItems:"center",className:p.buttonContainer},x__default.createElement(IconButton,{variant:"transparent","aria-label":"Close",size:"small",icon:x__default.createElement(CloseIcon,{size:"small"}),onClick:()=>{o();}})))};R.displayName="ModalHeader";function V(){return {root:css({padding:`${d.spacingM} ${d.spacingL}`,color:d.gray700,fontSize:d.fontSizeM,fontFamily:d.fontStackPrimary,lineHeight:d.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var w=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=V();return x__default.createElement(Box,c(s({},r),{as:"div",className:cx(l.root,e),testId:o}),t)};w.displayName="ModalContent";function Z(o){let e=cx(css({backgroundColor:d.colorWhite,borderRadius:o.size==="zen"?0: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"}),o.allowHeightOverflow?css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?css({maxWidth:`calc(100vw - ${d.spacingXl})`,maxHeight:`calc(100vh - ${d.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:css({display:"block"}),base:{root:cx(css({zIndex:d.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none",transform:o.size==="zen"?"scale(1)":"scale(0.85)",transition:`transform ${d.transitionDurationDefault} ${d.transitionEasingDefault}`}),o.size==="zen"?css({width:"100%",height:"100%"}):null),afterOpen:css({transform:"scale(1) !important"}),beforeClose:css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:cx(css({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",padding:d.spacing2Xl}),o.size==="fullscreen"?css({padding:0}):null,o.position==="center"?css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css({opacity:"1 !important"}),beforeClose:css({opacity:"0 !important"})},modal:e}}var xo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function Po(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=p=>{var S=p,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:r=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:l="50px",aria:M}=S,n=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var L,N;let z=x.useRef(null),P=c(s({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:i,testId:a,topOffset:l}),f=Z({position:e,size:i,allowHeightOverflow:o,className:n.className,overlayClassName:(L=n.overlayProps)==null?void 0:L.className}),k=()=>{var O,T;let u=z.current;if(u){let I=document.activeElement;if(u!==I&&u.contains(I))return}let b=(O=P.initialFocusRef)==null?void 0:O.current;b?(T=b.focus)==null||T.call(b):u&&Po(u);},F=(...u)=>{P.onAfterOpen&&P.onAfterOpen(...u),k();},W=()=>x.createElement(x.Fragment,null,n.title&&x.createElement(R,s({title:n.title,subtitle:n.subtitle,onClose:P.onClose},n.modalHeaderProps)),x.createElement(w,s({},n.modalContentProps),n.children));return x.createElement(yo,{ariaHideApp:!1,aria:M,onRequestClose:P.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:f.portal,style:{content:{top:e==="center"?0:l},overlay:(N=n.overlayProps)==null?void 0:N.style},className:{base:f.base.root,afterOpen:f.base.afterOpen,beforeClose:f.base.beforeClose},overlayClassName:{base:f.modalOverlay.root,afterOpen:f.modalOverlay.afterOpen,beforeClose:f.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:u=>{z.current=u;}},x.createElement(Box,{testId:a,style:{width:xo[i]||i},className:f.modal,"data-modal-root":!0},typeof n.children=="function"?n.children(P):W()))};j.displayName="Modal";function _(){return {root:css({borderBottomLeftRadius:d.borderRadiusMedium,borderBottomRightRadius:d.borderRadiusMedium,padding:`${d.spacingS} ${d.spacingM}`,width:"100%",boxSizing:"border-box"})}}var D=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=_();return x__default.createElement(Flex,c(s({},r),{className:cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),x__default.createElement(ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};D.displayName="ModalControls";var g=j;g.Content=w;g.Header=R;g.Controls=D;var to=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:M=!1,isConfirmLoading:n=!1,isShown:p,modalContentProps:S,modalControlsProps:z,modalHeaderProps:P,onCancel:f,onConfirm:k,shouldCloseOnEscapePress:F=!0,shouldCloseOnOverlayClick:W=!0,size:L="medium",testId:N="cf-ui-modal-confirm",title:u="Are you sure?",initialFocusRef:b})=>{let O=x__default.useRef(null),T=i?x__default.createElement(Button,{testId:a,isDisabled:M,isLoading:n,variant:l,size:"small",onClick:()=>k()},i):null,I=e?x__default.createElement(Button,{testId:t,variant:"secondary",onClick:f,size:"small",ref:b||O},e):null;return x__default.createElement(g,{testId:N,isShown:p,onClose:f,size:L,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:O},()=>x__default.createElement(x__default.Fragment,null,x__default.createElement(g.Header,c(s({title:u||""},P),{onClose:f})),x__default.createElement(g.Content,s({},S),r),x__default.createElement(g.Controls,s({},z),I,T)))};to.displayName="ModalConfirm";var no=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},B=new Map;function Ho(){return A(this,null,function*(){yield Promise.all(Array.from(B.entries()).map(i=>A(this,[i],function*([o,{render:e,currentConfig:t,delay:r}]){let a=c(s({},t),{isShown:!1});e(a),yield new Promise(l=>setTimeout(l,r)),q.unmountComponentAtNode(no(o)),B.delete(o);})));})}function wo(o,e={}){e=s({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,r=no(t);return new Promise(i=>{let a={onClose:M,isShown:!0};function l({onClose:n,isShown:p}){q.render(o({onClose:n,isShown:p}),r);}function M(n){return A(this,null,function*(){a=c(s({},a),{isShown:!1}),l(a),yield new Promise(p=>setTimeout(p,e.delay)),q.unmountComponentAtNode(r),r.remove(),B.delete(t),i(n);})}l(a),B.set(t,{render:l,currentConfig:a,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};

@@ -15,0 +15,0 @@ export { g as Modal, to as ModalConfirm, w as ModalContent, D as ModalControls, R as ModalHeader, Oo as ModalLauncher };

2

dist/index.js

@@ -38,3 +38,3 @@ 'use strict';

var ro=Object.defineProperty,ao=Object.defineProperties;var lo=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable;var G=(o,e,t)=>e in o?ro(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,s=(o,e)=>{for(var t in e||(e={}))Y.call(e,t)&&G(o,t,e[t]);if(E)for(var t of E(e))J.call(e,t)&&G(o,t,e[t]);return o},c=(o,e)=>ao(o,lo(e));var h=(o,e)=>{var t={};for(var r in o)Y.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&E)for(var r of E(o))e.indexOf(r)<0&&J.call(o,r)&&(t[r]=o[r]);return t};var A=(o,e,t)=>new Promise((r,i)=>{var a=n=>{try{M(t.next(n));}catch(p){i(p);}},l=n=>{try{M(t.throw(n));}catch(p){i(p);}},M=n=>n.done?r(n.value):Promise.resolve(n.value).then(a,l);M((t=t.apply(o,e)).next());});function Q(){return {root:emotion.css({position:"relative",padding:`${d__default.default.spacingM} ${d__default.default.spacingM} ${d__default.default.spacingM} ${d__default.default.spacingL}`,borderRadius:`${d__default.default.borderRadiusMedium} ${d__default.default.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${d__default.default.gray300}`}),buttonContainer:emotion.css({position:"relative",width:d__default.default.spacing2Xl,height:d__default.default.spacingL,button:{position:"absolute",top:`calc(-1 * ${d__default.default.spacing2Xs})`,right:0}})}}var R=M=>{var n=M,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:i,children:a}=n,l=h(n,["onClose","title","subtitle","testId","className","children"]);let p=Q();return x__namespace.default.createElement(f36Core.Flex,c(s({},l),{className:emotion.cx(p.root,i),testId:r,alignItems:"center",justifyContent:"space-between"}),x__namespace.default.createElement(f36Typography.Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e,t&&x__namespace.default.createElement(f36Typography.Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),a,o&&x__namespace.default.createElement(f36Core.Flex,{alignItems:"center",className:p.buttonContainer},x__namespace.default.createElement(f36Button.IconButton,{variant:"transparent","aria-label":"Close",size:"small",icon:x__namespace.default.createElement(f36Icons.CloseIcon,{size:"small"}),onClick:()=>{o();}})))};R.displayName="ModalHeader";function V(){return {root:emotion.css({padding:`${d__default.default.spacingM} ${d__default.default.spacingL}`,color:d__default.default.gray700,fontSize:d__default.default.fontSizeM,fontFamily:d__default.default.fontStackPrimary,lineHeight:d__default.default.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var w=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=V();return x__namespace.default.createElement(f36Core.Box,c(s({},r),{as:"div",className:emotion.cx(l.root,e),testId:o}),t)};w.displayName="ModalContent";function Z(o){let e=emotion.cx(emotion.css({backgroundColor:d__default.default.colorWhite,borderRadius:o.size==="zen"?0:d__default.default.borderRadiusMedium,boxShadow:d__default.default.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${d__default.default.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${d__default.default.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"}),o.allowHeightOverflow?emotion.css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?emotion.css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?emotion.css({maxWidth:`calc(100vw - ${d__default.default.spacingXl})`,maxHeight:`calc(100vh - ${d__default.default.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:emotion.css({display:"block"}),base:{root:emotion.cx(emotion.css({zIndex:d__default.default.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none",transform:o.size==="zen"?"scale(1)":"scale(0.85)",transition:`transform ${d__default.default.transitionDurationDefault} ${d__default.default.transitionEasingDefault}`}),o.size==="zen"?emotion.css({width:"100%",height:"100%"}):null),afterOpen:emotion.css({transform:"scale(1) !important"}),beforeClose:emotion.css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:emotion.cx(emotion.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:d__default.default.zIndexModal,opacity:0,transition:`opacity ${d__default.default.transitionDurationDefault} ${d__default.default.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center",padding:d__default.default.spacing2Xl}),o.size==="fullscreen"?emotion.css({padding:0}):null,o.position==="center"?emotion.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:emotion.css({opacity:"1 !important"}),beforeClose:emotion.css({opacity:"0 !important"})},modal:e}}var xo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function Po(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=p=>{var S=p,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:r=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:l="50px",aria:M}=S,n=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var L,N;let z=x__namespace.useRef(null),P=c(s({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:i,testId:a,topOffset:l}),f=Z({position:e,size:i,allowHeightOverflow:o,className:n.className,overlayClassName:(L=n.overlayProps)==null?void 0:L.className}),k=()=>{var O,T;let u=z.current;if(u){let I=document.activeElement;if(u!==I&&u.contains(I))return}let b=(O=P.initialFocusRef)==null?void 0:O.current;b?(T=b.focus)==null||T.call(b):u&&Po(u);},F=(...u)=>{P.onAfterOpen&&P.onAfterOpen(...u),k();},W=()=>x__namespace.createElement(x__namespace.Fragment,null,n.title&&x__namespace.createElement(R,s({title:n.title,subtitle:n.subtitle,onClose:P.onClose},n.modalHeaderProps)),x__namespace.createElement(w,s({},n.modalContentProps),n.children));return x__namespace.createElement(yo__default.default,{ariaHideApp:!1,aria:M,onRequestClose:P.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:f.portal,style:{content:{top:e==="center"?0:l},overlay:(N=n.overlayProps)==null?void 0:N.style},className:{base:f.base.root,afterOpen:f.base.afterOpen,beforeClose:f.base.beforeClose},overlayClassName:{base:f.modalOverlay.root,afterOpen:f.modalOverlay.afterOpen,beforeClose:f.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:u=>{z.current=u;}},x__namespace.createElement(f36Core.Box,{testId:a,style:{width:xo[i]||i},className:f.modal,"data-modal-root":!0},typeof n.children=="function"?n.children(P):W()))};j.displayName="Modal";function _(){return {root:emotion.css({borderBottomLeftRadius:d__default.default.borderRadiusMedium,borderBottomRightRadius:d__default.default.borderRadiusMedium,padding:`${d__default.default.spacingS} ${d__default.default.spacingM}`,width:"100%",boxSizing:"border-box"})}}var D=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=_();return x__namespace.default.createElement(f36Core.Flex,c(s({},r),{className:emotion.cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),x__namespace.default.createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};D.displayName="ModalControls";var g=j;g.Content=w;g.Header=R;g.Controls=D;var to=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:M=!1,isConfirmLoading:n=!1,isShown:p,modalContentProps:S,modalControlsProps:z,modalHeaderProps:P,onCancel:f,onConfirm:k,shouldCloseOnEscapePress:F=!0,shouldCloseOnOverlayClick:W=!0,size:L="medium",testId:N="cf-ui-modal-confirm",title:u="Are you sure?",initialFocusRef:b})=>{let O=x__namespace.default.useRef(null),T=i?x__namespace.default.createElement(f36Button.Button,{testId:a,isDisabled:M,isLoading:n,variant:l,size:"small",onClick:()=>k()},i):null,I=e?x__namespace.default.createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:f,size:"small",ref:b||O},e):null;return x__namespace.default.createElement(g,{testId:N,isShown:p,onClose:f,size:L,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:O},()=>x__namespace.default.createElement(x__namespace.default.Fragment,null,x__namespace.default.createElement(g.Header,c(s({title:u||""},P),{onClose:f})),x__namespace.default.createElement(g.Content,s({},S),r),x__namespace.default.createElement(g.Controls,s({},z),I,T)))};to.displayName="ModalConfirm";var no=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},B=new Map;function Ho(){return A(this,null,function*(){yield Promise.all(Array.from(B.entries()).map(i=>A(this,[i],function*([o,{render:e,currentConfig:t,delay:r}]){let a=c(s({},t),{isShown:!1});e(a),yield new Promise(l=>setTimeout(l,r)),q__default.default.unmountComponentAtNode(no(o)),B.delete(o);})));})}function wo(o,e={}){e=s({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,r=no(t);return new Promise(i=>{let a={onClose:M,isShown:!0};function l({onClose:n,isShown:p}){q__default.default.render(o({onClose:n,isShown:p}),r);}function M(n){return A(this,null,function*(){a=c(s({},a),{isShown:!1}),l(a),yield new Promise(p=>setTimeout(p,e.delay)),q__default.default.unmountComponentAtNode(r),r.remove(),B.delete(t),i(n);})}l(a),B.set(t,{render:l,currentConfig:a,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};
var ro=Object.defineProperty,ao=Object.defineProperties;var lo=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable;var G=(o,e,t)=>e in o?ro(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,s=(o,e)=>{for(var t in e||(e={}))Y.call(e,t)&&G(o,t,e[t]);if(E)for(var t of E(e))J.call(e,t)&&G(o,t,e[t]);return o},c=(o,e)=>ao(o,lo(e));var h=(o,e)=>{var t={};for(var r in o)Y.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&E)for(var r of E(o))e.indexOf(r)<0&&J.call(o,r)&&(t[r]=o[r]);return t};var A=(o,e,t)=>new Promise((r,i)=>{var a=n=>{try{M(t.next(n));}catch(p){i(p);}},l=n=>{try{M(t.throw(n));}catch(p){i(p);}},M=n=>n.done?r(n.value):Promise.resolve(n.value).then(a,l);M((t=t.apply(o,e)).next());});function Q(){return {root:emotion.css({position:"relative",padding:`${d__default.default.spacingM} ${d__default.default.spacingM} ${d__default.default.spacingM} ${d__default.default.spacingL}`,borderRadius:`${d__default.default.borderRadiusMedium} ${d__default.default.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${d__default.default.gray200}`}),buttonContainer:emotion.css({position:"relative",width:d__default.default.spacing2Xl,height:d__default.default.spacingL,button:{position:"absolute",top:`calc(-1 * ${d__default.default.spacing2Xs})`,right:0}})}}var R=M=>{var n=M,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:i,children:a}=n,l=h(n,["onClose","title","subtitle","testId","className","children"]);let p=Q();return x__namespace.default.createElement(f36Core.Flex,c(s({},l),{className:emotion.cx(p.root,i),testId:r,alignItems:"center",justifyContent:"space-between"}),x__namespace.default.createElement(f36Typography.Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e,t&&x__namespace.default.createElement(f36Typography.Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),a,o&&x__namespace.default.createElement(f36Core.Flex,{alignItems:"center",className:p.buttonContainer},x__namespace.default.createElement(f36Button.IconButton,{variant:"transparent","aria-label":"Close",size:"small",icon:x__namespace.default.createElement(f36Icons.CloseIcon,{size:"small"}),onClick:()=>{o();}})))};R.displayName="ModalHeader";function V(){return {root:emotion.css({padding:`${d__default.default.spacingM} ${d__default.default.spacingL}`,color:d__default.default.gray700,fontSize:d__default.default.fontSizeM,fontFamily:d__default.default.fontStackPrimary,lineHeight:d__default.default.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var w=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=V();return x__namespace.default.createElement(f36Core.Box,c(s({},r),{as:"div",className:emotion.cx(l.root,e),testId:o}),t)};w.displayName="ModalContent";function Z(o){let e=emotion.cx(emotion.css({backgroundColor:d__default.default.colorWhite,borderRadius:o.size==="zen"?0:d__default.default.borderRadiusMedium,boxShadow:d__default.default.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${d__default.default.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${d__default.default.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"}),o.allowHeightOverflow?emotion.css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?emotion.css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?emotion.css({maxWidth:`calc(100vw - ${d__default.default.spacingXl})`,maxHeight:`calc(100vh - ${d__default.default.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:emotion.css({display:"block"}),base:{root:emotion.cx(emotion.css({zIndex:d__default.default.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none",transform:o.size==="zen"?"scale(1)":"scale(0.85)",transition:`transform ${d__default.default.transitionDurationDefault} ${d__default.default.transitionEasingDefault}`}),o.size==="zen"?emotion.css({width:"100%",height:"100%"}):null),afterOpen:emotion.css({transform:"scale(1) !important"}),beforeClose:emotion.css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:emotion.cx(emotion.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:d__default.default.zIndexModal,opacity:0,transition:`opacity ${d__default.default.transitionDurationDefault} ${d__default.default.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center",padding:d__default.default.spacing2Xl}),o.size==="fullscreen"?emotion.css({padding:0}):null,o.position==="center"?emotion.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:emotion.css({opacity:"1 !important"}),beforeClose:emotion.css({opacity:"0 !important"})},modal:e}}var xo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function Po(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=p=>{var S=p,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:r=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:l="50px",aria:M}=S,n=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var L,N;let z=x__namespace.useRef(null),P=c(s({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:i,testId:a,topOffset:l}),f=Z({position:e,size:i,allowHeightOverflow:o,className:n.className,overlayClassName:(L=n.overlayProps)==null?void 0:L.className}),k=()=>{var O,T;let u=z.current;if(u){let I=document.activeElement;if(u!==I&&u.contains(I))return}let b=(O=P.initialFocusRef)==null?void 0:O.current;b?(T=b.focus)==null||T.call(b):u&&Po(u);},F=(...u)=>{P.onAfterOpen&&P.onAfterOpen(...u),k();},W=()=>x__namespace.createElement(x__namespace.Fragment,null,n.title&&x__namespace.createElement(R,s({title:n.title,subtitle:n.subtitle,onClose:P.onClose},n.modalHeaderProps)),x__namespace.createElement(w,s({},n.modalContentProps),n.children));return x__namespace.createElement(yo__default.default,{ariaHideApp:!1,aria:M,onRequestClose:P.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:f.portal,style:{content:{top:e==="center"?0:l},overlay:(N=n.overlayProps)==null?void 0:N.style},className:{base:f.base.root,afterOpen:f.base.afterOpen,beforeClose:f.base.beforeClose},overlayClassName:{base:f.modalOverlay.root,afterOpen:f.modalOverlay.afterOpen,beforeClose:f.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:u=>{z.current=u;}},x__namespace.createElement(f36Core.Box,{testId:a,style:{width:xo[i]||i},className:f.modal,"data-modal-root":!0},typeof n.children=="function"?n.children(P):W()))};j.displayName="Modal";function _(){return {root:emotion.css({borderBottomLeftRadius:d__default.default.borderRadiusMedium,borderBottomRightRadius:d__default.default.borderRadiusMedium,padding:`${d__default.default.spacingS} ${d__default.default.spacingM}`,width:"100%",boxSizing:"border-box"})}}var D=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,r=h(a,["testId","className","children"]);let l=_();return x__namespace.default.createElement(f36Core.Flex,c(s({},r),{className:emotion.cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),x__namespace.default.createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};D.displayName="ModalControls";var g=j;g.Content=w;g.Header=R;g.Controls=D;var to=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:M=!1,isConfirmLoading:n=!1,isShown:p,modalContentProps:S,modalControlsProps:z,modalHeaderProps:P,onCancel:f,onConfirm:k,shouldCloseOnEscapePress:F=!0,shouldCloseOnOverlayClick:W=!0,size:L="medium",testId:N="cf-ui-modal-confirm",title:u="Are you sure?",initialFocusRef:b})=>{let O=x__namespace.default.useRef(null),T=i?x__namespace.default.createElement(f36Button.Button,{testId:a,isDisabled:M,isLoading:n,variant:l,size:"small",onClick:()=>k()},i):null,I=e?x__namespace.default.createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:f,size:"small",ref:b||O},e):null;return x__namespace.default.createElement(g,{testId:N,isShown:p,onClose:f,size:L,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:O},()=>x__namespace.default.createElement(x__namespace.default.Fragment,null,x__namespace.default.createElement(g.Header,c(s({title:u||""},P),{onClose:f})),x__namespace.default.createElement(g.Content,s({},S),r),x__namespace.default.createElement(g.Controls,s({},z),I,T)))};to.displayName="ModalConfirm";var no=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},B=new Map;function Ho(){return A(this,null,function*(){yield Promise.all(Array.from(B.entries()).map(i=>A(this,[i],function*([o,{render:e,currentConfig:t,delay:r}]){let a=c(s({},t),{isShown:!1});e(a),yield new Promise(l=>setTimeout(l,r)),q__default.default.unmountComponentAtNode(no(o)),B.delete(o);})));})}function wo(o,e={}){e=s({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,r=no(t);return new Promise(i=>{let a={onClose:M,isShown:!0};function l({onClose:n,isShown:p}){q__default.default.render(o({onClose:n,isShown:p}),r);}function M(n){return A(this,null,function*(){a=c(s({},a),{isShown:!1}),l(a),yield new Promise(p=>setTimeout(p,e.delay)),q__default.default.unmountComponentAtNode(r),r.remove(),B.delete(t),i(n);})}l(a),B.set(t,{render:l,currentConfig:a,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};

@@ -41,0 +41,0 @@ exports.Modal = g;

8

package.json
{
"name": "@contentful/f36-modal",
"version": "4.67.3",
"version": "4.67.4",
"description": "Forma 36: Modal component",

@@ -9,7 +9,7 @@ "scripts": {

"dependencies": {
"@contentful/f36-button": "^4.67.3",
"@contentful/f36-core": "^4.67.3",
"@contentful/f36-button": "^4.67.4",
"@contentful/f36-core": "^4.67.4",
"@contentful/f36-icons": "^4.29.0",
"@contentful/f36-tokens": "^4.0.4",
"@contentful/f36-typography": "^4.67.3",
"@contentful/f36-typography": "^4.67.4",
"@types/react-modal": "^3.13.1",

@@ -16,0 +16,0 @@ "emotion": "^10.0.17",

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc