npm - @contentful/f36-modal - Versions diffs - 5.0.0 → 5.1.0 - Mend

@contentful/f36-modal 5.0.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -1,15 +1,16 @@
-import * as P from 'react';
-import P__default from 'react';
-import uo from 'react-modal';
+import * as x from 'react';
+import x__default from 'react';
+import yo from 'react-modal';
 import { Flex, Box } from '@contentful/f36-core';
 import { cx, css } from 'emotion';
-import { CloseIcon } from '@contentful/f36-icons';
-import { Button, ButtonGroup } from '@contentful/f36-button';
-import { Subheading } from '@contentful/f36-typography';
-import p from '@contentful/f36-tokens';
-import B from 'react-dom';
+import { XIcon } from '@contentful/f36-icons';
+import { IconButton, ButtonGroup, Button } from '@contentful/f36-button';
+import { Subheading, Text } from '@contentful/f36-typography';
+import d from '@contentful/f36-tokens';
+import q from 'react-dom';
-var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var k=(o,e,t)=>e in o?to(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,l=(o,e)=>{for(var t in e||(e={}))A.call(e,t)&&k(o,t,e[t]);if(T)for(var t of T(e))W.call(e,t)&&k(o,t,e[t]);return o},M=(o,e)=>no(o,ro(e));var x=(o,e)=>{var t={};for(var n in o)A.call(o,n)&&e.indexOf(n)<0&&(t[n]=o[n]);if(o!=null&&T)for(var n of T(o))e.indexOf(n)<0&&W.call(o,n)&&(t[n]=o[n]);return t};var E=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{d(t.next(r));}catch(C){i(C);}},s=r=>{try{d(t.throw(r));}catch(C){i(C);}},d=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,s);d((t=t.apply(o,e)).next());});function X(){return {root:css({position:"relative",padding:`${p.spacingM} ${p.spacingM} ${p.spacingM} ${p.spacingL}`,borderRadius:`${p.borderRadiusMedium} ${p.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${p.gray300}`}),buttonContainer:css({position:"relative",width:p.spacing2Xl,height:p.spacingL,button:{position:"absolute",top:`calc(-1 * ${p.spacing2Xs})`,right:0}})}}var h=a=>{var s=a,{onClose:o,title:e,testId:t="cf-ui-modal-header",className:n}=s,i=x(s,["onClose","title","testId","className"]);let d=X();return P__default.createElement(Flex,M(l({},i),{className:cx(d.root,n),testId:t,alignItems:"center",justifyContent:"space-between"}),P__default.createElement(Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e),o&&P__default.createElement(Flex,{alignItems:"center",className:d.buttonContainer},P__default.createElement(Button,{variant:"transparent","aria-label":"Close",startIcon:P__default.createElement(CloseIcon,{size:"small"}),onClick:()=>{o();},size:"small"})))};h.displayName="ModalHeader";function G(){return {root:css({padding:`${p.spacingM} ${p.spacingL}`,color:p.gray700,fontSize:p.fontSizeM,fontFamily:p.fontStackPrimary,lineHeight:p.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var R=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=x(a,["testId","className","children"]);let s=G();return P__default.createElement(Box,M(l({},n),{as:"div",className:cx(s.root,e),testId:o}),t)};R.displayName="ModalContent";function Y(o){let e=cx(css({margin:p.spacing2Xl,backgroundColor:p.colorWhite,borderRadius:o.size==="zen"?0:p.borderRadiusMedium,boxShadow:p.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${p.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${p.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.className);return {portal:css({display:"block"}),base:{root:cx(css({zIndex:p.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 ${p.transitionDurationDefault} ${p.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)"})},modalOverlay:{root:cx(css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:p.zIndexModal,opacity:0,transition:`opacity ${p.transitionDurationDefault} ${p.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center"}),o.position==="center"?css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css({opacity:1}),beforeClose:css({opacity:0})},modal:e}}var Co={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function yo(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 F=C=>{var w=C,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:s="50px",aria:d}=w,r=x(w,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var O,S;let v=P.useRef(null),m=M(l({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:s}),u=Y({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(O=r.overlayProps)==null?void 0:O.className});P.useEffect(()=>{m.isShown&&setTimeout(()=>{m.initialFocusRef&&m.initialFocusRef.current?m.initialFocusRef.current.focus&&m.initialFocusRef.current.focus():v.current&&yo(v.current);},100);},[m.isShown,m.initialFocusRef]);let N=()=>P.createElement(P.Fragment,null,r.title&&P.createElement(h,l({title:r.title,onClose:m.onClose},r.modalHeaderProps)),P.createElement(R,l({},r.modalContentProps),r.children));return P.createElement(uo,{ariaHideApp:!1,aria:d,onRequestClose:m.onClose,isOpen:r.isShown,onAfterOpen:m.onAfterOpen,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:u.portal,style:{content:{top:e==="center"?0:s},overlay:(S=r.overlayProps)==null?void 0:S.style},className:{base:u.base.root,afterOpen:u.base.afterOpen,beforeClose:u.base.beforeClose},overlayClassName:{base:u.modalOverlay.root,afterOpen:u.modalOverlay.afterOpen,beforeClose:u.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:I=>{v.current=I;}},P.createElement(Box,{testId:a,style:{width:Co[i]||i},className:u.modal,"data-modal-root":!0},typeof r.children=="function"?r.children(m):N()))};F.displayName="Modal";var z=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,n=x(a,["testId","className","children"]);return P__default.createElement(Flex,M(l({},n),{className:e,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),P__default.createElement(ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};z.displayName="ModalControls";var g=F;g.Content=R;g.Header=h;g.Controls=z;var Q=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:s="positive",isConfirmDisabled:d=!1,isConfirmLoading:r=!1,isShown:C,modalContentProps:w,modalControlsProps:v,modalHeaderProps:m,onCancel:u,onConfirm:N,shouldCloseOnEscapePress:O=!0,shouldCloseOnOverlayClick:S=!0,size:I="medium",testId:V="cf-ui-modal-confirm",title:Z="Are you sure?",initialFocusRef:_})=>{let $=P__default.useRef(null),oo=i?P__default.createElement(Button,{testId:a,isDisabled:d,isLoading:r,variant:s,size:"small",onClick:()=>N()},i):null,eo=e?P__default.createElement(Button,{testId:t,variant:"secondary",onClick:u,size:"small",ref:_||$},e):null;return P__default.createElement(g,{testId:V,isShown:C,onClose:u,size:I,shouldCloseOnOverlayClick:S,shouldCloseOnEscapePress:O,allowHeightOverflow:o,initialFocusRef:$},()=>P__default.createElement(P__default.Fragment,null,P__default.createElement(g.Header,l({title:Z||""},m)),P__default.createElement(g.Content,l({},w),n),P__default.createElement(g.Controls,l({},v),eo,oo)))};Q.displayName="ModalConfirm";var U=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},L=new Map;function xo(){L.forEach((i,a)=>E(this,[i,a],function*({render:o,currentConfig:e,delay:t},n){let s=M(l({},e),{isShown:!1});o(s),yield new Promise(d=>setTimeout(d,t)),B.unmountComponentAtNode(U(n)),L.delete(n);}));}function ho(o,e={}){e=l({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,n=U(t);return new Promise(i=>{let a={onClose:d,isShown:!0};function s({onClose:r,isShown:C}){B.render(o({onClose:r,isShown:C}),n);}function d(r){return E(this,null,function*(){a=M(l({},a),{isShown:!1}),s(a),yield new Promise(C=>setTimeout(C,e.delay)),B.unmountComponentAtNode(n),n.remove(),L.delete(t),i(r);})}s(a),L.set(t,{render:s,currentConfig:a,delay:e.delay});})}var bo={open:ho,closeAll:xo};
+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 b=(o,e)=>{var t={};for(var n in o)Y.call(o,n)&&e.indexOf(n)<0&&(t[n]=o[n]);if(o!=null&&E)for(var n of E(o))e.indexOf(n)<0&&J.call(o,n)&&(t[n]=o[n]);return t};var A=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{u(t.next(r));}catch(p){i(p);}},l=r=>{try{u(t.throw(r));}catch(p){i(p);}},u=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,l);u((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 H=r=>{var p=r,{onClose:o,title:e,subtitle:t,testId:n="cf-ui-modal-header",className:i,children:a,aria:l={closeIconLabel:"Close"}}=p,u=b(p,["onClose","title","subtitle","testId","className","children","aria"]);let h=Q();return x__default.createElement(Flex,c(s({},u),{className:cx(h.root,i),testId:n,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:h.buttonContainer},x__default.createElement(IconButton,{variant:"transparent","aria-label":l.closeIconLabel,size:"small",icon:x__default.createElement(XIcon,{size:"small"}),onClick:()=>{o();}})))};H.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 O=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=b(a,["testId","className","children"]);let l=V();return x__default.createElement(Box,c(s({},n),{as:"div",className:cx(l.root,e),testId:o}),t)};O.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 h=p,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:l="50px",aria:u}=h,r=b(h,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var z,I;let L=x.useRef(null),P=c(s({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:l}),f=Z({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(z=r.overlayProps)==null?void 0:z.className}),k=()=>{var S,N;let M=L.current;if(M){let T=document.activeElement;if(M!==T&&M.contains(T))return}let v=(S=P.initialFocusRef)==null?void 0:S.current;v?(N=v.focus)==null||N.call(v):M&&Po(M);},F=(...M)=>{P.onAfterOpen&&P.onAfterOpen(...M),k();},W=()=>x.createElement(x.Fragment,null,r.title&&x.createElement(H,s({title:r.title,subtitle:r.subtitle,onClose:P.onClose},r.modalHeaderProps)),x.createElement(O,s({},r.modalContentProps),r.children));return x.createElement(yo,{ariaHideApp:!1,aria:u,onRequestClose:P.onClose,isOpen:r.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:f.portal,style:{content:{top:e==="center"?0:l},overlay:(I=r.overlayProps)==null?void 0:I.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:M=>{L.current=M;}},x.createElement(Box,{testId:a,style:{width:xo[i]||i},className:f.modal,"data-modal-root":!0},typeof r.children=="function"?r.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,n=b(a,["testId","className","children"]);let l=_();return x__default.createElement(Flex,c(s({},n),{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=O;g.Header=H;g.Controls=D;var to=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:u=!1,isConfirmLoading:r=!1,isShown:p,modalContentProps:h,modalControlsProps:L,modalHeaderProps:P,onCancel:f,onConfirm:k,shouldCloseOnEscapePress:F=!0,shouldCloseOnOverlayClick:W=!0,size:z="medium",testId:I="cf-ui-modal-confirm",title:M="Are you sure?",initialFocusRef:v})=>{let S=x__default.useRef(null),N=i?x__default.createElement(Button,{testId:a,isDisabled:u,isLoading:r,variant:l,size:"small",onClick:()=>k()},i):null,T=e?x__default.createElement(Button,{testId:t,variant:"secondary",onClick:f,size:"small",ref:v||S},e):null;return x__default.createElement(g,{testId:I,isShown:p,onClose:f,size:z,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:S},()=>x__default.createElement(x__default.Fragment,null,x__default.createElement(g.Header,c(s({title:M||""},P),{onClose:f})),x__default.createElement(g.Content,s({},h),n),x__default.createElement(g.Controls,s({},L),T,N)))};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:n}]){let a=c(s({},t),{isShown:!1});e(a),yield new Promise(l=>setTimeout(l,n)),q.unmountComponentAtNode(no(o)),B.delete(o);})));})}function wo(o,e={}){e=s({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,n=no(t);return new Promise(i=>{let a={onClose:u,isShown:!0};function l({onClose:r,isShown:p}){q.render(o({onClose:r,isShown:p}),n);}function u(r){return A(this,null,function*(){a=c(s({},a),{isShown:!1}),l(a),yield new Promise(p=>setTimeout(p,e.delay)),q.unmountComponentAtNode(n),n.remove(),B.delete(t),i(r);})}l(a),B.set(t,{render:l,currentConfig:a,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};
-export { g as Modal, Q as ModalConfirm, R as ModalContent, z as ModalControls, h as ModalHeader, bo as ModalLauncher };
+export { g as Modal, to as ModalConfirm, O as ModalContent, D as ModalControls, H as ModalHeader, Oo as ModalLauncher };
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/Modal.tsx","../../src/ModalHeader/ModalHeader.tsx","../../src/ModalHeader/ModalHeader.styles.ts","../../src/ModalContent/ModalContent.tsx","../../src/ModalContent/ModalContent.styles.ts","../../src/Modal.styles.ts","../../src/ModalControls/ModalControls.tsx","../../src/CompoundModal.tsx","../../src/ModalConfirm/ModalConfirm.tsx","../../src/ModalLauncher/ModalLauncher.tsx"],"names":["React","ReactModal","Box","cx","CloseIcon","Flex","Button","Subheading","tokens","css","getModalHeaderStyles","ModalHeader","_a","_b","onClose","title","testId","className","otherProps","__objRest","styles","__spreadProps","__spreadValues","getModalContentStyles","ModalContent","children","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","aria","contentRef","renderDefault","ref","ButtonGroup","ModalControls","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","cancelButton","ReactDOM","getRoot","rootElId","rootDom","openModalsIds","closeAll","_0","_1","__async","render","currentConfig","delay","config","resolveDelay","open","componentRenderer","options","resolve","arg","ModalLauncher"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n\n /\n Function that will be run when the modal is requested to be closed, prior to actually closing.\n /\n onClose: ReactModal.Props['onRequestClose'];\n\n /\n Function that will be run after the modal has opened.\n /\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /\n Additional aria attributes\n /\n aria?: ReactModal.Props['aria'];\n\n /\n Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n /\n shouldCloseOnEscapePress?: boolean;\n /\n Indicating if modal is centered or linked to the top\n * @default center\n /\n position?: ModalPositionType;\n /\n Top offset if position is 'top'\n * @default 50px\n /\n topOffset?: number \| string;\n /\n Modal title that is used in header\n /\n title?: string;\n /\n Size of the modal window\n * @default medium\n /\n size?: ModalSizeType \| string \| number;\n /\n Are modals higher than viewport allowed\n * @default false\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override overlay behaviour\n /\n overlayProps?: Pick<CommonProps, 'className' \| 'style'>;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional property to set initial focus\n /\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode \| RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n React.useEffect(() => {\n if (props.isShown) {\n setTimeout(() => {\n if (props.initialFocusRef && props.initialFocusRef.current) {\n if (props.initialFocusRef.current.focus) {\n props.initialFocusRef.current.focus();\n }\n } else if (contentRef.current) {\n focusFirstWithinNode(contentRef.current);\n }\n }, 100);\n }\n }, [props.isShown, props.initialFocusRef]);\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={props.onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] \|\| size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { CloseIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n onClose?: Function;\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n testId = 'cf-ui-modal-header',\n className,\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n </Subheading>\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <Button\n variant=\"transparent\"\n aria-label=\"Close\"\n startIcon={<CloseIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n size=\"small\"\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray300}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n margin: tokens.spacing2Xl,\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n }),\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: 1,\n }),\n beforeClose: css({\n opacity: 0,\n }),\n },\n modal,\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] \| React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n return (\n <Flex\n {...otherProps}\n className={className}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n margin=\"spacingL\"\n marginTop=\"none\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n /\n Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n /\n onConfirm(): void;\n /\n Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n /\n onCancel: ModalProps['onClose'];\n /\n Modal title that is used in header\n /\n title?: string;\n /*\n Label of the confirm button\n /\n confirmLabel?: string \| false;\n /\n Label of the cancel button\n /\n cancelLabel?: string \| false;\n /\n The intent of the ModalConfirm. Used for the Button.\n /\n intent?: 'primary' \| 'positive' \| 'negative';\n /\n Size of the modal window\n /\n size?: ModalProps['size'];\n /\n Boolean indicating if clicking the overlay should close the overlay.\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n /\n shouldCloseOnEscapePress?: boolean;\n /\n When true, the confirm button is set to disabled.\n /\n isConfirmDisabled?: boolean;\n /\n When true, the confirm button is set to loading.\n /\n isConfirmLoading?: boolean;\n /\n Are modals higher than viewport allowed\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional props to override ModalControl behaviour\n /\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /\n Optional property to set initial focus\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef \|\| cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header title={title \|\| ''} {...modalHeaderProps} />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/ global Promise /\nimport ReactDOM from 'react-dom';\n\n// @todo: change any to unknown\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ModalLauncherComponentRendererProps<T = any> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /\n Unique id to be used as identifier for the modal contianer\n /\n modalId?: string;\n /\n ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData {\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<any>) => void;\n currentConfig: ModalLauncherComponentRendererProps<any>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nfunction closeAll() {\n openModalsIds.forEach(async ({ render, currentConfig, delay }, rootElId) => {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n ReactDOM.unmountComponentAtNode(getRoot(rootElId));\n openModalsIds.delete(rootElId);\n });\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction open<T = any>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => JSX.Element,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Allow components to specify if they wish to reuse the modal container\n const rootElId = `modals-root${options.modalId \|\| Date.now()}`;\n const rootDom = getRoot(rootElId);\n\n return new Promise((resolve) => {\n let currentConfig = { onClose, isShown: true };\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n ReactDOM.render(componentRenderer({ onClose, isShown }), rootDom);\n }\n\n async function onClose(arg?: T) {\n currentConfig = {\n ...currentConfig,\n isShown: false,\n };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n ReactDOM.unmountComponentAtNode(rootDom);\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(arg);\n }\n\n render(currentConfig);\n openModalsIds.set(rootElId, {\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}
1	+ {"version":3,"sources":["../../src/Modal.tsx","../../src/ModalHeader/ModalHeader.tsx","../../src/ModalHeader/ModalHeader.styles.ts","../../src/ModalContent/ModalContent.tsx","../../src/ModalContent/ModalContent.styles.ts","../../src/Modal.styles.ts","../../src/ModalControls/ModalControls.tsx","../../src/ModalControls/ModalControls.styles.tsx","../../src/CompoundModal.tsx","../../src/ModalConfirm/ModalConfirm.tsx","../../src/ModalLauncher/ModalLauncher.tsx"],"names":["React","ReactModal","Box","cx","XIcon","Flex","IconButton","Text","Subheading","tokens","css","getModalHeaderStyles","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","__spreadProps","__spreadValues","getModalContentStyles","ModalContent","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ref","ButtonGroup","getModalControlStyles","ModalControls","Button","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","cancelButton","ReactDOM","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","_0","render","currentConfig","delay","config","resolveDelay","open","componentRenderer","options","resolve","arg","ModalLauncher"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n fullscreen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n\n /\n Function that will be run when the modal is requested to be closed, prior to actually closing.\n /\n onClose: ReactModal.Props['onRequestClose'];\n\n /\n Function that will be run after the modal has opened.\n /\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /\n Additional aria attributes\n /\n aria?: ReactModal.Props['aria'];\n\n /\n Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n /\n shouldCloseOnEscapePress?: boolean;\n /\n Indicating if modal is centered or linked to the top\n * @default center\n /\n position?: ModalPositionType;\n /\n Top offset if position is 'top'\n * @default 50px\n /\n topOffset?: number \| string;\n /\n Modal title that is used in header\n /\n title?: string;\n /\n Modal subtitle that is used in header\n /\n subtitle?: string;\n /\n Size of the modal window\n * @default medium\n /\n size?: ModalSizeType \| string \| number;\n /\n Are modals higher than viewport allowed\n * @default false\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override overlay behaviour\n /\n overlayProps?: Pick<CommonProps, 'className' \| 'style'>;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional property to set initial focus\n /\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode \| RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n const onInitialFocus = () => {\n const contentEl = contentRef.current;\n if (contentEl) {\n const activeEl = document.activeElement;\n const isContentContainsActive =\n contentEl !== activeEl && contentEl.contains(activeEl);\n\n if (isContentContainsActive) {\n return;\n }\n }\n\n const initialFocusEl = props.initialFocusRef?.current;\n if (initialFocusEl) {\n initialFocusEl.focus?.();\n } else if (contentEl) {\n focusFirstWithinNode(contentEl);\n }\n };\n\n const onAfterOpen: ModalProps['onAfterOpen'] = (...args) => {\n if (props.onAfterOpen) {\n props.onAfterOpen(...args);\n }\n onInitialFocus();\n };\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n subtitle={otherProps.subtitle}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] \|\| size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { XIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { Text, Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n subtitle?: string;\n onClose?: Function;\n children?: React.ReactNode;\n aria?: {\n closeIconLabel?: string;\n };\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n subtitle,\n testId = 'cf-ui-modal-header',\n className,\n children,\n aria = {\n closeIconLabel: 'Close',\n },\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n {subtitle && (\n <Text marginLeft=\"spacingXs\" fontColor=\"gray700\">\n {subtitle}\n </Text>\n )}\n </Subheading>\n {children}\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <IconButton\n variant=\"transparent\"\n aria-label={aria.closeIconLabel}\n size=\"small\"\n icon={<XIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.size === 'fullscreen'\n ? css({\n maxWidth: `calc(100vw - ${tokens.spacingXl})`,\n maxHeight: `calc(100vh - ${tokens.spacingXl})`,\n margin: 0,\n height: '100vh',\n width: '100vw',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85) !important',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n padding: tokens.spacing2Xl,\n }),\n props.size === 'fullscreen'\n ? css({\n padding: 0,\n })\n : null,\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: '1 !important',\n }),\n beforeClose: css({\n opacity: '0 !important',\n }),\n },\n modal,\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\nimport { getModalControlStyles } from './ModalControls.styles';\nimport { cx } from 'emotion';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] \| React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n const styles = getModalControlStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalControlStyles() {\n return {\n root: css({\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n width: `100%`,\n // This is required in places where it is not set globally (e.g. dialogs via the app framework)\n boxSizing: 'border-box',\n }),\n };\n}\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n /\n Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n /\n onConfirm(): void;\n /\n Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n /\n onCancel: ModalProps['onClose'];\n /\n Modal title that is used in header\n /\n title?: string;\n /*\n Label of the confirm button\n /\n confirmLabel?: string \| false;\n /\n Label of the cancel button\n /\n cancelLabel?: string \| false;\n /\n The intent of the ModalConfirm. Used for the Button.\n /\n intent?: 'primary' \| 'positive' \| 'negative';\n /\n Size of the modal window\n /\n size?: ModalProps['size'];\n /\n Boolean indicating if clicking the overlay should close the overlay.\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n /\n shouldCloseOnEscapePress?: boolean;\n /\n When true, the confirm button is set to disabled.\n /\n isConfirmDisabled?: boolean;\n /\n When true, the confirm button is set to loading.\n /\n isConfirmLoading?: boolean;\n /\n Are modals higher than viewport allowed\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional props to override ModalControl behaviour\n /\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /\n Optional property to set initial focus\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef \|\| cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header\n title={title \|\| ''}\n {...modalHeaderProps}\n onClose={onCancel}\n />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/ global Promise /\nimport ReactDOM from 'react-dom';\n\n// @todo: change any to unknown\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ModalLauncherComponentRendererProps<T = any> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /\n Unique id to be used as identifier for the modal contianer\n /\n modalId?: string;\n /\n ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData {\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<any>) => void;\n currentConfig: ModalLauncherComponentRendererProps<any>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nasync function closeAll(): Promise<void> {\n await Promise.all(\n Array.from(openModalsIds.entries()).map(\n async ([rootElId, { render, currentConfig, delay }]) => {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n ReactDOM.unmountComponentAtNode(getRoot(rootElId));\n openModalsIds.delete(rootElId);\n },\n ),\n );\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction open<T = any>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => JSX.Element,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Allow components to specify if they wish to reuse the modal container\n const rootElId = `modals-root${options.modalId \|\| Date.now()}`;\n const rootDom = getRoot(rootElId);\n\n return new Promise((resolve) => {\n let currentConfig = { onClose, isShown: true };\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n ReactDOM.render(componentRenderer({ onClose, isShown }), rootDom);\n }\n\n async function onClose(arg?: T) {\n currentConfig = {\n ...currentConfig,\n isShown: false,\n };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n ReactDOM.unmountComponentAtNode(rootDom);\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(arg);\n }\n\n render(currentConfig);\n openModalsIds.set(rootElId, {\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,229 @@
+import * as React from 'react';
+import React__default from 'react';
+import ReactModal from 'react-modal';
+import { PropsWithHTMLElement, CommonProps, ExpandProps } from '@contentful/f36-core';
+interface ModalHeaderInternalProps extends CommonProps {
+    title: string;
+    subtitle?: string;
+    onClose?: Function;
+    children?: React__default.ReactNode;
+    aria?: {
+        closeIconLabel?: string;
+    };
+}
+declare type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
+declare const ModalHeader: {
+    ({ onClose, title, subtitle, testId, className, children, aria, ...otherProps }: ModalHeaderProps): React__default.ReactElement;
+    displayName: string;
+};
+interface ModalContentInternalProps extends CommonProps {
+    children: React__default.ReactNode;
+}
+declare type ModalContentProps = PropsWithHTMLElement<ModalContentInternalProps, 'div'>;
+declare const ModalContent: {
+    ({ testId, className, children, ...otherProps }: ModalContentProps): JSX.Element;
+    displayName: string;
+};
+declare type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen' | 'fullscreen';
+declare type ModalPositionType = 'center' | 'top';
+interface ModalProps extends CommonProps {
+    /**
+     * When true, the dialog is shown.
+     */
+    isShown: boolean;
+    /**
+     * Function that will be run when the modal is requested to be closed, prior to actually closing.
+     */
+    onClose: ReactModal.Props['onRequestClose'];
+    /**
+     * Function that will be run after the modal has opened.
+     */
+    onAfterOpen?: ReactModal.Props['onAfterOpen'];
+    /**
+     * Additional aria attributes
+     */
+    aria?: ReactModal.Props['aria'];
+    /**
+     * Boolean indicating if clicking the overlay should close the overlay.
+     * @default true
+     */
+    shouldCloseOnOverlayClick?: boolean;
+    /**
+     * Boolean indicating if pressing the esc key should close the overlay.
+     * @default true
+     */
+    shouldCloseOnEscapePress?: boolean;
+    /**
+     * Indicating if modal is centered or linked to the top
+     * @default center
+     */
+    position?: ModalPositionType;
+    /**
+     * Top offset if position is 'top'
+     * @default 50px
+     */
+    topOffset?: number | string;
+    /**
+     * Modal title that is used in header
+     */
+    title?: string;
+    /**
+     * Modal subtitle that is used in header
+     */
+    subtitle?: string;
+    /**
+     * Size of the modal window
+     * @default medium
+     */
+    size?: ModalSizeType | string | number;
+    /**
+     * Are modals higher than viewport allowed
+     * @default false
+     */
+    allowHeightOverflow?: boolean;
+    /**
+     * Optional props to override overlay behaviour
+     */
+    overlayProps?: Pick<CommonProps, 'className' | 'style'>;
+    /**
+     * Optional props to override ModalHeader behaviour
+     */
+    modalHeaderProps?: Partial<ModalHeaderProps>;
+    /**
+     * Optional props to override ModalContent behaviour
+     */
+    modalContentProps?: Partial<ModalContentProps>;
+    /**
+     * Optional property to set initial focus
+     */
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    children: React.ReactNode | RenderModal;
+}
+declare type RenderModal = (modalProps: ModalProps) => React.ReactNode;
+declare const Modal$1: {
+    ({ allowHeightOverflow, position, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, topOffset, aria, ...otherProps }: ExpandProps<ModalProps>): JSX.Element;
+    displayName: string;
+};
+interface ModalControlsInternalProps extends CommonProps {
+    children: React__default.ReactElement[] | React__default.ReactElement;
+}
+declare type ModalControlsProps = PropsWithHTMLElement<ModalControlsInternalProps, 'div'>;
+declare const ModalControls: {
+    ({ testId, className, children, ...otherProps }: ModalControlsProps): React__default.ReactElement;
+    displayName: string;
+};
+declare type CompoundModal = typeof Modal$1 & {
+    Content: typeof ModalContent;
+    Header: typeof ModalHeader;
+    Controls: typeof ModalControls;
+};
+declare const Modal: CompoundModal;
+interface ModalConfirmProps {
+    /**
+     * When true, the dialog is shown.
+     */
+    isShown: boolean;
+    /**
+     * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.
+     */
+    onConfirm(): void;
+    /**
+     * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.
+     */
+    onCancel: ModalProps['onClose'];
+    /**
+        Modal title that is used in header
+      */
+    title?: string;
+    /**
+     * Label of the confirm button
+     */
+    confirmLabel?: string | false;
+    /**
+     * Label of the cancel button
+     */
+    cancelLabel?: string | false;
+    /**
+     * The intent of the ModalConfirm. Used for the Button.
+     */
+    intent?: 'primary' | 'positive' | 'negative';
+    /**
+     * Size of the modal window
+     */
+    size?: ModalProps['size'];
+    /**
+     * Boolean indicating if clicking the overlay should close the overlay.
+     */
+    shouldCloseOnOverlayClick?: boolean;
+    /**
+     * Boolean indicating if pressing the esc key should close the overlay.
+     */
+    shouldCloseOnEscapePress?: boolean;
+    /**
+     * When true, the confirm button is set to disabled.
+     */
+    isConfirmDisabled?: boolean;
+    /**
+     * When true, the confirm button is set to loading.
+     */
+    isConfirmLoading?: boolean;
+    /**
+     * Are modals higher than viewport allowed
+     */
+    allowHeightOverflow?: boolean;
+    /**
+     * Optional props to override ModalHeader behaviour
+     */
+    modalHeaderProps?: Partial<ModalHeaderProps>;
+    /**
+     * Optional props to override ModalContent behaviour
+     */
+    modalContentProps?: Partial<ModalContentProps>;
+    /**
+     * Optional props to override ModalControl behaviour
+     */
+    modalControlsProps?: Partial<ModalControlsProps>;
+    /**
+     * Optional property to set initial focus
+     */
+    initialFocusRef?: React__default.RefObject<any>;
+    testId?: string;
+    confirmTestId?: string;
+    cancelTestId?: string;
+    children: React__default.ReactNode;
+}
+declare const ModalConfirm: {
+    ({ allowHeightOverflow, cancelLabel, cancelTestId, children, confirmLabel, confirmTestId, intent, isConfirmDisabled, isConfirmLoading, isShown, modalContentProps, modalControlsProps, modalHeaderProps, onCancel, onConfirm, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, title, initialFocusRef, }: ModalConfirmProps): JSX.Element;
+    displayName: string;
+};
+interface ModalLauncherComponentRendererProps<T = any> {
+    isShown: boolean;
+    onClose: (result?: T) => void;
+}
+interface ModalLauncherOpenOptions {
+    /**
+     * Unique id to be used as identifier for the modal contianer
+     */
+    modalId?: string;
+    /**
+     * ms before removing the component from the tree
+     * @default 300
+     */
+    delay?: number;
+}
+declare function closeAll(): Promise<void>;
+declare function open<T = any>(componentRenderer: (props: ModalLauncherComponentRendererProps<T>) => JSX.Element, options?: ModalLauncherOpenOptions): Promise<T>;
+declare const ModalLauncher: {
+    open: typeof open;
+    closeAll: typeof closeAll;
+};
+export { Modal, ModalConfirm, ModalConfirmProps, ModalContent, ModalContentProps, ModalControls, ModalControlsProps, ModalHeader, ModalHeaderProps, ModalLauncher, ModalLauncherComponentRendererProps, ModalLauncherOpenOptions, ModalProps };

package/dist/index.d.ts CHANGED Viewed

@@ -5,11 +5,16 @@ import { PropsWithHTMLElement, CommonProps, ExpandProps } from '@contentful/f36-
 interface ModalHeaderInternalProps extends CommonProps {
     title: string;
+    subtitle?: string;
     onClose?: Function;
+    children?: React__default.ReactNode;
+    aria?: {
+        closeIconLabel?: string;
+    };
 }
 declare type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
 declare const ModalHeader: {
-    ({ onClose, title, testId, className, ...otherProps }: ModalHeaderProps): React__default.ReactElement;
+    ({ onClose, title, subtitle, testId, className, children, aria, ...otherProps }: ModalHeaderProps): React__default.ReactElement;
     displayName: string;
 };
@@ -22,7 +27,7 @@ declare const ModalContent: {
     displayName: string;
 };
-declare type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen';
+declare type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen' | 'fullscreen';
 declare type ModalPositionType = 'center' | 'top';
 interface ModalProps extends CommonProps {
@@ -66,6 +71,10 @@ interface ModalProps extends CommonProps {
      * Modal title that is used in header
      */
     title?: string;
+    /**
+     * Modal subtitle that is used in header
+     */
+    subtitle?: string;
     /**
      * Size of the modal window
      * @default medium
@@ -210,7 +219,7 @@ interface ModalLauncherOpenOptions {
      */
     delay?: number;
 }
-declare function closeAll(): void;
+declare function closeAll(): Promise<void>;
 declare function open<T = any>(componentRenderer: (props: ModalLauncherComponentRendererProps<T>) => JSX.Element, options?: ModalLauncherOpenOptions): Promise<T>;
 declare const ModalLauncher: {
     open: typeof open;

package/dist/index.js CHANGED Viewed

@@ -1,18 +1,16 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var P = require('react');
-var uo = require('react-modal');
+var x = require('react');
+var yo = require('react-modal');
 var f36Core = require('@contentful/f36-core');
 var emotion = require('emotion');
 var f36Icons = require('@contentful/f36-icons');
 var f36Button = require('@contentful/f36-button');
 var f36Typography = require('@contentful/f36-typography');
-var p = require('@contentful/f36-tokens');
-var B = require('react-dom');
+var d = require('@contentful/f36-tokens');
+var q = 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 }; }
 function _interopNamespace(e) {
 	if (e && e.__esModule) return e;
@@ -28,22 +26,22 @@ function _interopNamespace(e) {
 			}
 		});
 	}
-	n["default"] = e;
+	n.default = e;
 	return Object.freeze(n);
 }
-var P__default = /*#__PURE__*/_interopDefaultLegacy(P);
-var P__namespace = /*#__PURE__*/_interopNamespace(P);
-var uo__default = /*#__PURE__*/_interopDefaultLegacy(uo);
-var p__default = /*#__PURE__*/_interopDefaultLegacy(p);
-var B__default = /*#__PURE__*/_interopDefaultLegacy(B);
+var x__namespace = /*#__PURE__*/_interopNamespace(x);
+var yo__default = /*#__PURE__*/_interopDefault(yo);
+var d__default = /*#__PURE__*/_interopDefault(d);
+var q__default = /*#__PURE__*/_interopDefault(q);
-var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var k=(o,e,t)=>e in o?to(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,l=(o,e)=>{for(var t in e||(e={}))A.call(e,t)&&k(o,t,e[t]);if(T)for(var t of T(e))W.call(e,t)&&k(o,t,e[t]);return o},M=(o,e)=>no(o,ro(e));var x=(o,e)=>{var t={};for(var n in o)A.call(o,n)&&e.indexOf(n)<0&&(t[n]=o[n]);if(o!=null&&T)for(var n of T(o))e.indexOf(n)<0&&W.call(o,n)&&(t[n]=o[n]);return t};var E=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{d(t.next(r));}catch(C){i(C);}},s=r=>{try{d(t.throw(r));}catch(C){i(C);}},d=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,s);d((t=t.apply(o,e)).next());});function X(){return {root:emotion.css({position:"relative",padding:`${p__default["default"].spacingM} ${p__default["default"].spacingM} ${p__default["default"].spacingM} ${p__default["default"].spacingL}`,borderRadius:`${p__default["default"].borderRadiusMedium} ${p__default["default"].borderRadiusMedium} 0 0`,borderBottom:`1px solid ${p__default["default"].gray300}`}),buttonContainer:emotion.css({position:"relative",width:p__default["default"].spacing2Xl,height:p__default["default"].spacingL,button:{position:"absolute",top:`calc(-1 * ${p__default["default"].spacing2Xs})`,right:0}})}}var h=a=>{var s=a,{onClose:o,title:e,testId:t="cf-ui-modal-header",className:n}=s,i=x(s,["onClose","title","testId","className"]);let d=X();return P__default["default"].createElement(f36Core.Flex,M(l({},i),{className:emotion.cx(d.root,n),testId:t,alignItems:"center",justifyContent:"space-between"}),P__default["default"].createElement(f36Typography.Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e),o&&P__default["default"].createElement(f36Core.Flex,{alignItems:"center",className:d.buttonContainer},P__default["default"].createElement(f36Button.Button,{variant:"transparent","aria-label":"Close",startIcon:P__default["default"].createElement(f36Icons.CloseIcon,{size:"small"}),onClick:()=>{o();},size:"small"})))};h.displayName="ModalHeader";function G(){return {root:emotion.css({padding:`${p__default["default"].spacingM} ${p__default["default"].spacingL}`,color:p__default["default"].gray700,fontSize:p__default["default"].fontSizeM,fontFamily:p__default["default"].fontStackPrimary,lineHeight:p__default["default"].lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var R=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=x(a,["testId","className","children"]);let s=G();return P__default["default"].createElement(f36Core.Box,M(l({},n),{as:"div",className:emotion.cx(s.root,e),testId:o}),t)};R.displayName="ModalContent";function Y(o){let e=emotion.cx(emotion.css({margin:p__default["default"].spacing2Xl,backgroundColor:p__default["default"].colorWhite,borderRadius:o.size==="zen"?0:p__default["default"].borderRadiusMedium,boxShadow:p__default["default"].boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${p__default["default"].fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${p__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.className);return {portal:emotion.css({display:"block"}),base:{root:emotion.cx(emotion.css({zIndex:p__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 ${p__default["default"].transitionDurationDefault} ${p__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)"})},modalOverlay:{root:emotion.cx(emotion.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:p__default["default"].zIndexModal,opacity:0,transition:`opacity ${p__default["default"].transitionDurationDefault} ${p__default["default"].transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center"}),o.position==="center"?emotion.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:emotion.css({opacity:1}),beforeClose:emotion.css({opacity:0})},modal:e}}var Co={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function yo(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 F=C=>{var w=C,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:s="50px",aria:d}=w,r=x(w,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var O,S;let v=P__namespace.useRef(null),m=M(l({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:s}),u=Y({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(O=r.overlayProps)==null?void 0:O.className});P__namespace.useEffect(()=>{m.isShown&&setTimeout(()=>{m.initialFocusRef&&m.initialFocusRef.current?m.initialFocusRef.current.focus&&m.initialFocusRef.current.focus():v.current&&yo(v.current);},100);},[m.isShown,m.initialFocusRef]);let N=()=>P__namespace.createElement(P__namespace.Fragment,null,r.title&&P__namespace.createElement(h,l({title:r.title,onClose:m.onClose},r.modalHeaderProps)),P__namespace.createElement(R,l({},r.modalContentProps),r.children));return P__namespace.createElement(uo__default["default"],{ariaHideApp:!1,aria:d,onRequestClose:m.onClose,isOpen:r.isShown,onAfterOpen:m.onAfterOpen,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:u.portal,style:{content:{top:e==="center"?0:s},overlay:(S=r.overlayProps)==null?void 0:S.style},className:{base:u.base.root,afterOpen:u.base.afterOpen,beforeClose:u.base.beforeClose},overlayClassName:{base:u.modalOverlay.root,afterOpen:u.modalOverlay.afterOpen,beforeClose:u.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:I=>{v.current=I;}},P__namespace.createElement(f36Core.Box,{testId:a,style:{width:Co[i]||i},className:u.modal,"data-modal-root":!0},typeof r.children=="function"?r.children(m):N()))};F.displayName="Modal";var z=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,n=x(a,["testId","className","children"]);return P__default["default"].createElement(f36Core.Flex,M(l({},n),{className:e,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),P__default["default"].createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};z.displayName="ModalControls";var g=F;g.Content=R;g.Header=h;g.Controls=z;var Q=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:s="positive",isConfirmDisabled:d=!1,isConfirmLoading:r=!1,isShown:C,modalContentProps:w,modalControlsProps:v,modalHeaderProps:m,onCancel:u,onConfirm:N,shouldCloseOnEscapePress:O=!0,shouldCloseOnOverlayClick:S=!0,size:I="medium",testId:V="cf-ui-modal-confirm",title:Z="Are you sure?",initialFocusRef:_})=>{let $=P__default["default"].useRef(null),oo=i?P__default["default"].createElement(f36Button.Button,{testId:a,isDisabled:d,isLoading:r,variant:s,size:"small",onClick:()=>N()},i):null,eo=e?P__default["default"].createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:u,size:"small",ref:_||$},e):null;return P__default["default"].createElement(g,{testId:V,isShown:C,onClose:u,size:I,shouldCloseOnOverlayClick:S,shouldCloseOnEscapePress:O,allowHeightOverflow:o,initialFocusRef:$},()=>P__default["default"].createElement(P__default["default"].Fragment,null,P__default["default"].createElement(g.Header,l({title:Z||""},m)),P__default["default"].createElement(g.Content,l({},w),n),P__default["default"].createElement(g.Controls,l({},v),eo,oo)))};Q.displayName="ModalConfirm";var U=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},L=new Map;function xo(){L.forEach((i,a)=>E(this,[i,a],function*({render:o,currentConfig:e,delay:t},n){let s=M(l({},e),{isShown:!1});o(s),yield new Promise(d=>setTimeout(d,t)),B__default["default"].unmountComponentAtNode(U(n)),L.delete(n);}));}function ho(o,e={}){e=l({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,n=U(t);return new Promise(i=>{let a={onClose:d,isShown:!0};function s({onClose:r,isShown:C}){B__default["default"].render(o({onClose:r,isShown:C}),n);}function d(r){return E(this,null,function*(){a=M(l({},a),{isShown:!1}),s(a),yield new Promise(C=>setTimeout(C,e.delay)),B__default["default"].unmountComponentAtNode(n),n.remove(),L.delete(t),i(r);})}s(a),L.set(t,{render:s,currentConfig:a,delay:e.delay});})}var bo={open:ho,closeAll:xo};
+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 b=(o,e)=>{var t={};for(var n in o)Y.call(o,n)&&e.indexOf(n)<0&&(t[n]=o[n]);if(o!=null&&E)for(var n of E(o))e.indexOf(n)<0&&J.call(o,n)&&(t[n]=o[n]);return t};var A=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{u(t.next(r));}catch(p){i(p);}},l=r=>{try{u(t.throw(r));}catch(p){i(p);}},u=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,l);u((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 H=r=>{var p=r,{onClose:o,title:e,subtitle:t,testId:n="cf-ui-modal-header",className:i,children:a,aria:l={closeIconLabel:"Close"}}=p,u=b(p,["onClose","title","subtitle","testId","className","children","aria"]);let h=Q();return x__namespace.default.createElement(f36Core.Flex,c(s({},u),{className:emotion.cx(h.root,i),testId:n,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:h.buttonContainer},x__namespace.default.createElement(f36Button.IconButton,{variant:"transparent","aria-label":l.closeIconLabel,size:"small",icon:x__namespace.default.createElement(f36Icons.XIcon,{size:"small"}),onClick:()=>{o();}})))};H.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 O=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=b(a,["testId","className","children"]);let l=V();return x__namespace.default.createElement(f36Core.Box,c(s({},n),{as:"div",className:emotion.cx(l.root,e),testId:o}),t)};O.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 h=p,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:l="50px",aria:u}=h,r=b(h,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var z,I;let L=x__namespace.useRef(null),P=c(s({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:l}),f=Z({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(z=r.overlayProps)==null?void 0:z.className}),k=()=>{var S,N;let M=L.current;if(M){let T=document.activeElement;if(M!==T&&M.contains(T))return}let v=(S=P.initialFocusRef)==null?void 0:S.current;v?(N=v.focus)==null||N.call(v):M&&Po(M);},F=(...M)=>{P.onAfterOpen&&P.onAfterOpen(...M),k();},W=()=>x__namespace.createElement(x__namespace.Fragment,null,r.title&&x__namespace.createElement(H,s({title:r.title,subtitle:r.subtitle,onClose:P.onClose},r.modalHeaderProps)),x__namespace.createElement(O,s({},r.modalContentProps),r.children));return x__namespace.createElement(yo__default.default,{ariaHideApp:!1,aria:u,onRequestClose:P.onClose,isOpen:r.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:f.portal,style:{content:{top:e==="center"?0:l},overlay:(I=r.overlayProps)==null?void 0:I.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:M=>{L.current=M;}},x__namespace.createElement(f36Core.Box,{testId:a,style:{width:xo[i]||i},className:f.modal,"data-modal-root":!0},typeof r.children=="function"?r.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,n=b(a,["testId","className","children"]);let l=_();return x__namespace.default.createElement(f36Core.Flex,c(s({},n),{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=O;g.Header=H;g.Controls=D;var to=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:u=!1,isConfirmLoading:r=!1,isShown:p,modalContentProps:h,modalControlsProps:L,modalHeaderProps:P,onCancel:f,onConfirm:k,shouldCloseOnEscapePress:F=!0,shouldCloseOnOverlayClick:W=!0,size:z="medium",testId:I="cf-ui-modal-confirm",title:M="Are you sure?",initialFocusRef:v})=>{let S=x__namespace.default.useRef(null),N=i?x__namespace.default.createElement(f36Button.Button,{testId:a,isDisabled:u,isLoading:r,variant:l,size:"small",onClick:()=>k()},i):null,T=e?x__namespace.default.createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:f,size:"small",ref:v||S},e):null;return x__namespace.default.createElement(g,{testId:I,isShown:p,onClose:f,size:z,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:S},()=>x__namespace.default.createElement(x__namespace.default.Fragment,null,x__namespace.default.createElement(g.Header,c(s({title:M||""},P),{onClose:f})),x__namespace.default.createElement(g.Content,s({},h),n),x__namespace.default.createElement(g.Controls,s({},L),T,N)))};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:n}]){let a=c(s({},t),{isShown:!1});e(a),yield new Promise(l=>setTimeout(l,n)),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()}`,n=no(t);return new Promise(i=>{let a={onClose:u,isShown:!0};function l({onClose:r,isShown:p}){q__default.default.render(o({onClose:r,isShown:p}),n);}function u(r){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(n),n.remove(),B.delete(t),i(r);})}l(a),B.set(t,{render:l,currentConfig:a,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};
 exports.Modal = g;
-exports.ModalConfirm = Q;
-exports.ModalContent = R;
-exports.ModalControls = z;
-exports.ModalHeader = h;
-exports.ModalLauncher = bo;
+exports.ModalConfirm = to;
+exports.ModalContent = O;
+exports.ModalControls = D;
+exports.ModalHeader = H;
+exports.ModalLauncher = Oo;
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/Modal.tsx","../src/ModalHeader/ModalHeader.tsx","../src/ModalHeader/ModalHeader.styles.ts","../src/ModalContent/ModalContent.tsx","../src/ModalContent/ModalContent.styles.ts","../src/Modal.styles.ts","../src/ModalControls/ModalControls.tsx","../src/CompoundModal.tsx","../src/ModalConfirm/ModalConfirm.tsx","../src/ModalLauncher/ModalLauncher.tsx"],"names":["React","ReactModal","Box","cx","CloseIcon","Flex","Button","Subheading","tokens","css","getModalHeaderStyles","ModalHeader","_a","_b","onClose","title","testId","className","otherProps","__objRest","styles","__spreadProps","__spreadValues","getModalContentStyles","ModalContent","children","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","aria","contentRef","renderDefault","ref","ButtonGroup","ModalControls","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","cancelButton","ReactDOM","getRoot","rootElId","rootDom","openModalsIds","closeAll","_0","_1","__async","render","currentConfig","delay","config","resolveDelay","open","componentRenderer","options","resolve","arg","ModalLauncher"],"mappings":"kyBAAA,UAAYA,MAAW,QACvB,OAAOC,OAAgB,cAEvB,OAAS,OAAAC,OAA+C,uBCHxD,OAAOF,MAAW,QAClB,OAAS,MAAAG,OAAU,UACnB,OAAS,aAAAC,OAAiB,wBAC1B,OACE,QAAAC,MAGK,uBACP,OAAS,UAAAC,OAAc,yBACvB,OAAS,cAAAC,OAAkB,6BCT3B,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAEb,SAASC,GAAuB,CACrC,MAAO,CACL,KAAMD,EAAI,CACR,SAAU,WACV,QAAS,GAAGD,EAAO,YAAYA,EAAO,YAAYA,EAAO,YAAYA,EAAO,WAC5E,aAAc,GAAGA,EAAO,sBAAsBA,EAAO,yBACrD,aAAc,aAAaA,EAAO,SACpC,CAAC,EACD,gBAAiBC,EAAI,CACnB,SAAU,WACV,MAAOD,EAAO,WACd,OAAQA,EAAO,SACf,OAAQ,CACN,SAAU,WACV,IAAK,aAAaA,EAAO,cACzB,MAAO,CACT,CACF,CAAC,CACH,CACF,CDCO,IAAMG,EAAeC,GAMgB,CANhB,IAAAC,EAAAD,EAC1B,SAAAE,EACA,MAAAC,EACA,OAAAC,EAAS,qBACT,UAAAC,CA3BF,EAuB4BJ,EAKvBK,EAAAC,EALuBN,EAKvB,CAJH,UACA,QACA,SACA,cAGA,IAAMO,EAASV,EAAqB,EAEpC,OACEV,EAAA,cAACK,EAAAgB,EAAAC,EAAA,GACKJ,GADL,CAEC,UAAWf,GAAGiB,EAAO,KAAMH,CAAS,EACpC,OAAQD,EACR,WAAW,SACX,eAAe,kBAEfhB,EAAA,cAACO,GAAA,CAAW,GAAG,KAAK,YAAW,GAAC,aAAa,QAC1CQ,CACH,EACCD,GACCd,EAAA,cAACK,EAAA,CAAK,WAAW,SAAS,UAAWe,EAAO,iBAC1CpB,EAAA,cAACM,GAAA,CACC,QAAQ,cACR,aAAW,QACX,UAAWN,EAAA,cAACI,GAAA,CAAU,KAAK,QAAQ,EACnC,QAAS,IAAM,CACbU,EAAQ,CACV,EACA,KAAK,QACP,CACF,CAEJ,CAEJ,EAEAH,EAAY,YAAc,cE5D1B,OAAOX,OAAW,QAClB,OAAS,MAAAG,OAAU,UACnB,OACE,OAAAD,OAGK,uBCNP,OAAS,OAAAO,OAAW,UACpB,OAAOD,MAAY,yBAEZ,SAASe,GAAwB,CACtC,MAAO,CACL,KAAMd,GAAI,CACR,QAAS,GAAGD,EAAO,YAAYA,EAAO,WACtC,MAAOA,EAAO,QACd,SAAUA,EAAO,UACjB,WAAYA,EAAO,iBACnB,WAAYA,EAAO,YACnB,UAAW,OACX,UAAW,OACX,UAAW,YACb,CAAC,CACH,CACF,CDEO,IAAMgB,EAAgBZ,GAKJ,CALI,IAAAC,EAAAD,EAC3B,QAAAI,EAAS,sBACT,UAAAC,EACA,SAAAQ,CArBF,EAkB6BZ,EAIxBK,EAAAC,EAJwBN,EAIxB,CAHH,SACA,YACA,aAGA,IAAMO,EAASG,EAAsB,EACrC,OACEvB,GAAA,cAACE,GAAAmB,EAAAC,EAAA,GACKJ,GADL,CAEC,GAAG,MACH,UAAWf,GAAGiB,EAAO,KAAMH,CAAS,EACpC,OAAQD,IAEPS,CACH,CAEJ,EAEAD,EAAa,YAAc,eErC3B,OAAOhB,MAAY,yBACnB,OAAS,OAAAC,EAAK,MAAAN,MAAU,UAIjB,SAASuB,EAAeC,EAM5B,CACD,IAAMC,EAAQzB,EACZM,EAAI,CACF,OAAQD,EAAO,WACf,gBAAiBA,EAAO,WACxB,aAAcmB,EAAM,OAAS,MAAQ,EAAInB,EAAO,mBAChD,UAAWA,EAAO,eAClB,UAAW,8BAA8BA,EAAO,oBAChD,SAAU,8BAA8BA,EAAO,oBAC/C,SAAU,SACV,QAAS,OACT,cAAe,QACjB,CAAC,EACDmB,EAAM,oBACFlB,EAAI,CACF,SAAU,OACV,UAAW,MACb,CAAC,EACD,KACJkB,EAAM,OAAS,MACXlB,EAAI,CACF,SAAU,OACV,UAAW,OACX,OAAQ,EACR,OAAQ,OACR,MAAO,MACT,CAAC,EACD,KACJkB,EAAM,SACR,EAEA,MAAO,CACL,OAAQlB,EAAI,CACV,QAAS,OACX,CAAC,EACD,KAAM,CACJ,KAAMN,EACJM,EAAI,CACF,OAAQD,EAAO,mBACf,SAAU,WACV,QAAS,EACT,QAAS,eACT,OAAQ,SACR,UAAW,OACX,QAAS,OACT,UAAWmB,EAAM,OAAS,MAAQ,WAAa,cAC/C,WAAY,aAAanB,EAAO,6BAA6BA,EAAO,yBACtE,CAAC,EACDmB,EAAM,OAAS,MACXlB,EAAI,CACF,MAAO,OACP,OAAQ,MACV,CAAC,EACD,IACN,EACA,UAAWA,EAAI,CACb,UAAW,qBACb,CAAC,EACD,YAAaA,EAAI,CACf,UAAWkB,EAAM,OAAS,MAAQ,WAAa,aACjD,CAAC,CACH,EACA,aAAc,CACZ,KAAMxB,EACJM,EAAI,CACF,QAAS,OACT,WAAY,WACZ,SAAU,OACV,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,OAAQD,EAAO,YACf,QAAS,EACT,WAAY,WAAWA,EAAO,6BAA6BA,EAAO,0BAClE,SAAU,QACV,UAAW,OACX,gBAAiB,4BACjB,UAAW,QACb,CAAC,EACDmB,EAAM,WAAa,SACflB,EAAI,CACF,WAAY,SACZ,eAAgB,QAClB,CAAC,EACD,KACJkB,EAAM,gBACR,EACA,UAAWlB,EAAI,CACb,QAAS,CACX,CAAC,EACD,YAAaA,EAAI,CACf,QAAS,CACX,CAAC,CACH,EACA,MAAAmB,CACF,CACF,CLlGA,IAAMC,GAAuD,CAC3D,OAAQ,QACR,MAAO,QACP,MAAO,QACP,UAAW,QACX,IAAK,OACP,EAmFA,SAASC,GAAqBC,EAAmB,CAC/C,GAAIA,GAAQA,EAAK,iBAAkB,CACjC,IAAMC,EAAWD,EAAK,iBAAiB,eAAe,EACtD,GAAIC,EAAS,OAAS,EAAG,CACvB,IAAMC,EAAeD,EAAS,GAE1B,OAAOC,EAAa,OAAU,YAEhCA,EAAa,MAAM,CAEvB,CACF,CACF,CAEO,IAAMC,EAAStB,GAUS,CAVT,IAAAC,EAAAD,EACpB,qBAAAuB,EAAsB,GACtB,SAAAC,EAAW,SACX,yBAAAC,EAA2B,GAC3B,0BAAAC,EAA4B,GAC5B,KAAAC,EAAO,SACP,OAAAvB,EAAS,cACT,UAAAwB,EAAY,OACZ,KAAAC,CAzHF,EAiHsB5B,EASjBK,EAAAC,EATiBN,EASjB,CARH,sBACA,WACA,2BACA,4BACA,OACA,SACA,YACA,SAzHF,IAAAD,EAAAC,EA4HE,IAAM6B,EAAmB,SAAuB,IAAI,EAE9Cf,EAAQN,EAAAC,EAAA,GACTJ,GADS,CAEZ,oBAAAiB,EACA,SAAAC,EACA,yBAAAC,EACA,0BAAAC,EACA,KAAAC,EACA,OAAAvB,EACA,UAAAwB,CACF,GAEMpB,EAASM,EAAe,CAC5B,SAAAU,EACA,KAAAG,EACA,oBAAAJ,EACA,UAAWjB,EAAW,UACtB,kBAAkBN,EAAAM,EAAW,eAAX,YAAAN,EAAyB,SAC7C,CAAC,EAEK,YAAU,IAAM,CAChBe,EAAM,SACR,WAAW,IAAM,CACXA,EAAM,iBAAmBA,EAAM,gBAAgB,QAC7CA,EAAM,gBAAgB,QAAQ,OAChCA,EAAM,gBAAgB,QAAQ,MAAM,EAE7Be,EAAW,SACpBZ,GAAqBY,EAAW,OAAO,CAE3C,EAAG,GAAG,CAEV,EAAG,CAACf,EAAM,QAASA,EAAM,eAAe,CAAC,EAEzC,IAAMgB,EAAgB,IAElB,gCACGzB,EAAW,OACV,gBAACP,EAAAW,EAAA,CACC,MAAOJ,EAAW,MAClB,QAASS,EAAM,SACXT,EAAW,iBACjB,EAEF,gBAACM,EAAAF,EAAA,GAAiBJ,EAAW,mBAC1BA,EAAW,QACd,CACF,EAIJ,OACE,gBAACjB,GAAA,CACC,YAAa,GACb,KAAMwC,EACN,eAAgBd,EAAM,QACtB,OAAQT,EAAW,QACnB,YAAaS,EAAM,YACnB,iBAAkBU,EAClB,0BAA2BC,EAC3B,uBAAsB,GACtB,4BAA2B,GAC3B,gBAAiBlB,EAAO,OACxB,MAAO,CACL,QAAS,CACP,IAAKgB,IAAa,SAAW,EAAII,CACnC,EACA,SAAS3B,EAAAK,EAAW,eAAX,YAAAL,EAAyB,KACpC,EACA,UAAW,CACT,KAAMO,EAAO,KAAK,KAClB,UAAWA,EAAO,KAAK,UACvB,YAAaA,EAAO,KAAK,WAC3B,EACA,iBAAkB,CAChB,KAAMA,EAAO,aAAa,KAC1B,UAAWA,EAAO,aAAa,UAC/B,YAAaA,EAAO,aAAa,WACnC,EACA,eAAgB,IAChB,WAAawB,GAAQ,CACnBF,EAAW,QAAUE,CACvB,GAEA,gBAAC1C,GAAA,CACC,OAAQc,EACR,MAAO,CACL,MAAOa,GAAiBU,IAASA,CACnC,EACA,UAAWnB,EAAO,MAClB,kBAAe,IAEd,OAAOF,EAAW,UAAa,WAC5BA,EAAW,SAASS,CAAK,EACzBgB,EAAc,CACpB,CACF,CAEJ,EAEAT,EAAM,YAAc,QMjOpB,OAAOlC,MAAW,QAElB,OACE,QAAAK,OAGK,uBACP,OAAS,eAAAwC,OAAmB,yBAWrB,IAAMC,EAAiBlC,GAKgB,CALhB,IAAAC,EAAAD,EAC5B,QAAAI,EAAS,uBACT,UAAAC,EACA,SAAAQ,CArBF,EAkB8BZ,EAIzBK,EAAAC,EAJyBN,EAIzB,CAHH,SACA,YACA,aAGA,OACEb,EAAA,cAACK,GAAAgB,EAAAC,EAAA,GACKJ,GADL,CAEC,UAAWD,EACX,OAAQD,EACR,cAAc,MACd,eAAe,WACf,OAAO,WACP,UAAU,SAEVhB,EAAA,cAAC6C,GAAA,CAAY,QAAQ,SAAS,QAAQ,YACnCpB,CACH,CACF,CAEJ,EAEAqB,EAAc,YAAc,gBC9BrB,IAAMZ,EAAQA,EACrBA,EAAM,QAAUV,EAChBU,EAAM,OAASvB,EACfuB,EAAM,SAAWY,ECdjB,OAAO9C,MAAW,QAOlB,OAAS,UAAAM,MAAc,yBAmFhB,IAAMyC,EAAe,CAAC,CAC3B,oBAAAZ,EAAsB,GACtB,YAAAa,EAAc,SACd,aAAAC,EAAe,oCACf,SAAAxB,EACA,aAAAyB,EAAe,UACf,cAAAC,EAAgB,qCAChB,OAAAC,EAAS,WACT,kBAAAC,EAAoB,GACpB,iBAAAC,EAAmB,GACnB,QAAAC,EACA,kBAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,UAAAC,EACA,yBAAAvB,EAA2B,GAC3B,0BAAAC,EAA4B,GAC5B,KAAAC,EAAO,SACP,OAAAvB,EAAS,sBACT,MAAAD,EAAQ,gBACR,gBAAA8C,CACF,IAAyB,CACvB,IAAMC,EAAY9D,EAAM,OAAO,IAAI,EAE7B+D,GAAgBb,EACpBlD,EAAA,cAACM,EAAA,CACC,OAAQ6C,EACR,WAAYE,EACZ,UAAWC,EACX,QAASF,EACT,KAAK,QACL,QAAS,IAAMQ,EAAU,GAExBV,CACH,EACE,KAEEc,GAAehB,EACnBhD,EAAA,cAACM,EAAA,CACC,OAAQ2C,EACR,QAAQ,YACR,QAASU,EACT,KAAK,QACL,IAAKE,GAAmBC,GAEvBd,CACH,EACE,KAEJ,OACEhD,EAAA,cAACkC,EAAA,CACC,OAAQlB,EACR,QAASuC,EACT,QAASI,EACT,KAAMpB,EACN,0BAA2BD,EAC3B,yBAA0BD,EAC1B,oBAAqBF,EACrB,gBAAiB2B,GAEhB,IAEG9D,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAACkC,EAAM,OAANZ,EAAA,CAAa,MAAOP,GAAS,IAAQ2C,EAAkB,EACxD1D,EAAA,cAACkC,EAAM,QAANZ,EAAA,GAAkBkC,GAAoB/B,CAAS,EAChDzB,EAAA,cAACkC,EAAM,SAANZ,EAAA,GAAmBmC,GACjBO,GACAD,EACH,CACF,CAGN,CAEJ,EAEAhB,EAAa,YAAc,eCtK3B,OAAOkB,MAAc,YA2BrB,IAAMC,EAAWC,GAAkC,CAEjD,IAAIC,EAAU,SAAS,eAAeD,CAAQ,EAC9C,OAAIC,IAAY,OAKhBA,EAAU,SAAS,cAAc,KAAK,EACtCA,EAAQ,aAAa,KAAMD,CAAQ,EACnC,SAAS,KAAK,YAAYC,CAAO,GAC1BA,CACT,EAEMC,EAA6C,IAAI,IACvD,SAASC,IAAW,CAClBD,EAAc,QAAQ,CAAOE,EAAkCC,IAAaC,EAAA,MAA/CF,EAAkCC,GAAa,UAA/C,CAAE,OAAAE,EAAQ,cAAAC,EAAe,MAAAC,CAAM,EAAGT,EAAa,CAC1E,IAAMU,EAASxD,EAAAC,EAAA,GAAKqD,GAAL,CAAoB,QAAS,EAAM,GAClDD,EAAOG,CAAM,EACb,MAAM,IAAI,QAASC,GAAiB,WAAWA,EAAcF,CAAK,CAAC,EACnEX,EAAS,uBAAuBC,EAAQC,CAAQ,CAAC,EACjDE,EAAc,OAAOF,CAAQ,CAC/B,EAAC,CACH,CAGA,SAASY,GACPC,EAGAC,EAAoC,CAAC,EACzB,CACZA,EAAU3D,EAAA,CAAE,MAAO,KAAQ2D,GAG3B,IAAMd,EAAW,cAAcc,EAAQ,SAAW,KAAK,IAAI,IACrDb,EAAUF,EAAQC,CAAQ,EAEhC,OAAO,IAAI,QAASe,GAAY,CAC9B,IAAIP,EAAgB,CAAE,QAAA7D,EAAS,QAAS,EAAK,EAE7C,SAAS4D,EAAO,CACd,QAAA5D,EACA,QAAAyC,CACF,EAA2C,CACzCU,EAAS,OAAOe,EAAkB,CAAE,QAAAlE,EAAS,QAAAyC,CAAQ,CAAC,EAAGa,CAAO,CAClE,CAEA,SAAetD,EAAQqE,EAAS,QAAAV,EAAA,sBAC9BE,EAAgBtD,EAAAC,EAAA,GACXqD,GADW,CAEd,QAAS,EACX,GACAD,EAAOC,CAAa,EACpB,MAAM,IAAI,QAASG,GACjB,WAAWA,EAAcG,EAAQ,KAAK,CACxC,EACAhB,EAAS,uBAAuBG,CAAO,EACvCA,EAAQ,OAAO,EACfC,EAAc,OAAOF,CAAQ,EAC7Be,EAAQC,CAAG,CACb,GAEAT,EAAOC,CAAa,EACpBN,EAAc,IAAIF,EAAU,CAC1B,OAAAO,EACA,cAAAC,EACA,MAAOM,EAAQ,KACjB,CAAC,CACH,CAAC,CACH,CAEO,IAAMG,GAAgB,CAC3B,KAAAL,GACA,SAAAT,EACF","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n\n /\n Function that will be run when the modal is requested to be closed, prior to actually closing.\n /\n onClose: ReactModal.Props['onRequestClose'];\n\n /\n Function that will be run after the modal has opened.\n /\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /\n Additional aria attributes\n /\n aria?: ReactModal.Props['aria'];\n\n /\n Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n /\n shouldCloseOnEscapePress?: boolean;\n /\n Indicating if modal is centered or linked to the top\n * @default center\n /\n position?: ModalPositionType;\n /\n Top offset if position is 'top'\n * @default 50px\n /\n topOffset?: number \| string;\n /\n Modal title that is used in header\n /\n title?: string;\n /\n Size of the modal window\n * @default medium\n /\n size?: ModalSizeType \| string \| number;\n /\n Are modals higher than viewport allowed\n * @default false\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override overlay behaviour\n /\n overlayProps?: Pick<CommonProps, 'className' \| 'style'>;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional property to set initial focus\n /\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode \| RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n React.useEffect(() => {\n if (props.isShown) {\n setTimeout(() => {\n if (props.initialFocusRef && props.initialFocusRef.current) {\n if (props.initialFocusRef.current.focus) {\n props.initialFocusRef.current.focus();\n }\n } else if (contentRef.current) {\n focusFirstWithinNode(contentRef.current);\n }\n }, 100);\n }\n }, [props.isShown, props.initialFocusRef]);\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={props.onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] \|\| size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { CloseIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n onClose?: Function;\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n testId = 'cf-ui-modal-header',\n className,\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n </Subheading>\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <Button\n variant=\"transparent\"\n aria-label=\"Close\"\n startIcon={<CloseIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n size=\"small\"\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray300}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n margin: tokens.spacing2Xl,\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n }),\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: 1,\n }),\n beforeClose: css({\n opacity: 0,\n }),\n },\n modal,\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] \| React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n return (\n <Flex\n {...otherProps}\n className={className}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n margin=\"spacingL\"\n marginTop=\"none\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n /\n Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n /\n onConfirm(): void;\n /\n Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n /\n onCancel: ModalProps['onClose'];\n /\n Modal title that is used in header\n /\n title?: string;\n /*\n Label of the confirm button\n /\n confirmLabel?: string \| false;\n /\n Label of the cancel button\n /\n cancelLabel?: string \| false;\n /\n The intent of the ModalConfirm. Used for the Button.\n /\n intent?: 'primary' \| 'positive' \| 'negative';\n /\n Size of the modal window\n /\n size?: ModalProps['size'];\n /\n Boolean indicating if clicking the overlay should close the overlay.\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n /\n shouldCloseOnEscapePress?: boolean;\n /\n When true, the confirm button is set to disabled.\n /\n isConfirmDisabled?: boolean;\n /\n When true, the confirm button is set to loading.\n /\n isConfirmLoading?: boolean;\n /\n Are modals higher than viewport allowed\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional props to override ModalControl behaviour\n /\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /\n Optional property to set initial focus\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef \|\| cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header title={title \|\| ''} {...modalHeaderProps} />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/ global Promise /\nimport ReactDOM from 'react-dom';\n\n// @todo: change any to unknown\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ModalLauncherComponentRendererProps<T = any> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /\n Unique id to be used as identifier for the modal contianer\n /\n modalId?: string;\n /\n ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData {\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<any>) => void;\n currentConfig: ModalLauncherComponentRendererProps<any>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nfunction closeAll() {\n openModalsIds.forEach(async ({ render, currentConfig, delay }, rootElId) => {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n ReactDOM.unmountComponentAtNode(getRoot(rootElId));\n openModalsIds.delete(rootElId);\n });\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction open<T = any>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => JSX.Element,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Allow components to specify if they wish to reuse the modal container\n const rootElId = `modals-root${options.modalId \|\| Date.now()}`;\n const rootDom = getRoot(rootElId);\n\n return new Promise((resolve) => {\n let currentConfig = { onClose, isShown: true };\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n ReactDOM.render(componentRenderer({ onClose, isShown }), rootDom);\n }\n\n async function onClose(arg?: T) {\n currentConfig = {\n ...currentConfig,\n isShown: false,\n };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n ReactDOM.unmountComponentAtNode(rootDom);\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(arg);\n }\n\n render(currentConfig);\n openModalsIds.set(rootElId, {\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}
1	+ {"version":3,"sources":["../src/Modal.tsx","../src/ModalHeader/ModalHeader.tsx","../src/ModalHeader/ModalHeader.styles.ts","../src/ModalContent/ModalContent.tsx","../src/ModalContent/ModalContent.styles.ts","../src/Modal.styles.ts","../src/ModalControls/ModalControls.tsx","../src/ModalControls/ModalControls.styles.tsx","../src/CompoundModal.tsx","../src/ModalConfirm/ModalConfirm.tsx","../src/ModalLauncher/ModalLauncher.tsx"],"names":["React","ReactModal","Box","cx","XIcon","Flex","IconButton","Text","Subheading","tokens","css","getModalHeaderStyles","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","__spreadProps","__spreadValues","getModalContentStyles","ModalContent","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ref","ButtonGroup","getModalControlStyles","ModalControls","Button","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","cancelButton","ReactDOM","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","_0","render","currentConfig","delay","config","resolveDelay","open","componentRenderer","options","resolve","arg","ModalLauncher"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n fullscreen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n\n /\n Function that will be run when the modal is requested to be closed, prior to actually closing.\n /\n onClose: ReactModal.Props['onRequestClose'];\n\n /\n Function that will be run after the modal has opened.\n /\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /\n Additional aria attributes\n /\n aria?: ReactModal.Props['aria'];\n\n /\n Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n /\n shouldCloseOnEscapePress?: boolean;\n /\n Indicating if modal is centered or linked to the top\n * @default center\n /\n position?: ModalPositionType;\n /\n Top offset if position is 'top'\n * @default 50px\n /\n topOffset?: number \| string;\n /\n Modal title that is used in header\n /\n title?: string;\n /\n Modal subtitle that is used in header\n /\n subtitle?: string;\n /\n Size of the modal window\n * @default medium\n /\n size?: ModalSizeType \| string \| number;\n /\n Are modals higher than viewport allowed\n * @default false\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override overlay behaviour\n /\n overlayProps?: Pick<CommonProps, 'className' \| 'style'>;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional property to set initial focus\n /\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode \| RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n const onInitialFocus = () => {\n const contentEl = contentRef.current;\n if (contentEl) {\n const activeEl = document.activeElement;\n const isContentContainsActive =\n contentEl !== activeEl && contentEl.contains(activeEl);\n\n if (isContentContainsActive) {\n return;\n }\n }\n\n const initialFocusEl = props.initialFocusRef?.current;\n if (initialFocusEl) {\n initialFocusEl.focus?.();\n } else if (contentEl) {\n focusFirstWithinNode(contentEl);\n }\n };\n\n const onAfterOpen: ModalProps['onAfterOpen'] = (...args) => {\n if (props.onAfterOpen) {\n props.onAfterOpen(...args);\n }\n onInitialFocus();\n };\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n subtitle={otherProps.subtitle}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] \|\| size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { XIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { Text, Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n subtitle?: string;\n onClose?: Function;\n children?: React.ReactNode;\n aria?: {\n closeIconLabel?: string;\n };\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n subtitle,\n testId = 'cf-ui-modal-header',\n className,\n children,\n aria = {\n closeIconLabel: 'Close',\n },\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n {subtitle && (\n <Text marginLeft=\"spacingXs\" fontColor=\"gray700\">\n {subtitle}\n </Text>\n )}\n </Subheading>\n {children}\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <IconButton\n variant=\"transparent\"\n aria-label={aria.closeIconLabel}\n size=\"small\"\n icon={<XIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.size === 'fullscreen'\n ? css({\n maxWidth: `calc(100vw - ${tokens.spacingXl})`,\n maxHeight: `calc(100vh - ${tokens.spacingXl})`,\n margin: 0,\n height: '100vh',\n width: '100vw',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85) !important',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n padding: tokens.spacing2Xl,\n }),\n props.size === 'fullscreen'\n ? css({\n padding: 0,\n })\n : null,\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: '1 !important',\n }),\n beforeClose: css({\n opacity: '0 !important',\n }),\n },\n modal,\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\nimport { getModalControlStyles } from './ModalControls.styles';\nimport { cx } from 'emotion';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] \| React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n const styles = getModalControlStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalControlStyles() {\n return {\n root: css({\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n width: `100%`,\n // This is required in places where it is not set globally (e.g. dialogs via the app framework)\n boxSizing: 'border-box',\n }),\n };\n}\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /*\n When true, the dialog is shown.\n /\n isShown: boolean;\n /\n Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n /\n onConfirm(): void;\n /\n Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n /\n onCancel: ModalProps['onClose'];\n /\n Modal title that is used in header\n /\n title?: string;\n /*\n Label of the confirm button\n /\n confirmLabel?: string \| false;\n /\n Label of the cancel button\n /\n cancelLabel?: string \| false;\n /\n The intent of the ModalConfirm. Used for the Button.\n /\n intent?: 'primary' \| 'positive' \| 'negative';\n /\n Size of the modal window\n /\n size?: ModalProps['size'];\n /\n Boolean indicating if clicking the overlay should close the overlay.\n /\n shouldCloseOnOverlayClick?: boolean;\n /\n Boolean indicating if pressing the esc key should close the overlay.\n /\n shouldCloseOnEscapePress?: boolean;\n /\n When true, the confirm button is set to disabled.\n /\n isConfirmDisabled?: boolean;\n /\n When true, the confirm button is set to loading.\n /\n isConfirmLoading?: boolean;\n /\n Are modals higher than viewport allowed\n /\n allowHeightOverflow?: boolean;\n\n /\n Optional props to override ModalHeader behaviour\n /\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /\n Optional props to override ModalContent behaviour\n /\n modalContentProps?: Partial<ModalContentProps>;\n\n /\n Optional props to override ModalControl behaviour\n /\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /\n Optional property to set initial focus\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef \|\| cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header\n title={title \|\| ''}\n {...modalHeaderProps}\n onClose={onCancel}\n />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/ global Promise /\nimport ReactDOM from 'react-dom';\n\n// @todo: change any to unknown\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ModalLauncherComponentRendererProps<T = any> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /\n Unique id to be used as identifier for the modal contianer\n /\n modalId?: string;\n /\n ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData {\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<any>) => void;\n currentConfig: ModalLauncherComponentRendererProps<any>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nasync function closeAll(): Promise<void> {\n await Promise.all(\n Array.from(openModalsIds.entries()).map(\n async ([rootElId, { render, currentConfig, delay }]) => {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n ReactDOM.unmountComponentAtNode(getRoot(rootElId));\n openModalsIds.delete(rootElId);\n },\n ),\n );\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction open<T = any>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => JSX.Element,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Allow components to specify if they wish to reuse the modal container\n const rootElId = `modals-root${options.modalId \|\| Date.now()}`;\n const rootDom = getRoot(rootElId);\n\n return new Promise((resolve) => {\n let currentConfig = { onClose, isShown: true };\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n ReactDOM.render(componentRenderer({ onClose, isShown }), rootDom);\n }\n\n async function onClose(arg?: T) {\n currentConfig = {\n ...currentConfig,\n isShown: false,\n };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n ReactDOM.unmountComponentAtNode(rootDom);\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(arg);\n }\n\n render(currentConfig);\n openModalsIds.set(rootElId, {\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,19 +1,19 @@
 {
   "name": "@contentful/f36-modal",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Forma 36: Modal component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-button": "^5.0.0",
-    "@contentful/f36-core": "^5.0.0",
-    "@contentful/f36-icons": "^5.0.0",
-    "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-typography": "^5.0.0",
-    "@types/react-modal": "^3.12.1",
+    "@contentful/f36-button": "^5.1.0",
+    "@contentful/f36-core": "^5.1.0",
+    "@contentful/f36-icons": "^5.1.0",
+    "@contentful/f36-tokens": "^5.1.0",
+    "@contentful/f36-typography": "^5.1.0",
+    "@types/react-modal": "^3.13.1",
     "emotion": "^10.0.17",
-    "react-modal": "^3.14.3"
+    "react-modal": "^3.16.1"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -31,9 +31,10 @@
   "browserslist": "extends @contentful/browserslist-config",
   "repository": {
     "type": "git",
-    "url": "https://github.com/contentful/forma-36"
+    "url": "git+https://github.com/contentful/forma-36.git"
   },
   "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
     "access": "public"
   }
 }