npm - @contentful/f36-modal - Versions diffs - 5.5.0 → 6.0.0-alpha.1 - Mend

@contentful/f36-modal 5.5.0 → 6.0.0-alpha.1

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,16 +1,2 @@
-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 { 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 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, to as ModalConfirm, O as ModalContent, D as ModalControls, H as ModalHeader, Oo as ModalLauncher };
-//# sourceMappingURL=out.js.map
+import*as P from'react';import P__default from'react';import Mo from'react-modal';import {Flex,Box}from'@contentful/f36-core';import {cx,css}from'@emotion/css';import {XIcon}from'@contentful/f36-icons';import {IconButton,ButtonGroup,Button}from'@contentful/f36-button';import {Subheading,Text}from'@contentful/f36-typography';import m from'@contentful/f36-tokens';import vo from'react-dom/client';var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:true,configurable:true,writable:true,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if(N)for(var t of N(e))Y.call(e,t)&&q(o,t,e[t]);return o},f=(o,e)=>no(o,ro(e));var h=(o,e)=>{var t={};for(var r in o)G.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&N)for(var r of N(o))e.indexOf(r)<0&&Y.call(o,r)&&(t[r]=o[r]);return t};var D=(o,e,t)=>new Promise((r,a)=>{var s=n=>{try{d(t.next(n));}catch(c){a(c);}},l=n=>{try{d(t.throw(n));}catch(c){a(c);}},d=n=>n.done?r(n.value):Promise.resolve(n.value).then(s,l);d((t=t.apply(o,e)).next());});function J(){return {root:css({position:"relative",padding:`${m.spacingM} ${m.spacingM} ${m.spacingM} ${m.spacingL}`,borderRadius:`${m.borderRadiusMedium} ${m.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${m.gray200}`}),buttonContainer:css({position:"relative",width:m.spacing2Xl,height:m.spacingL,button:{position:"absolute",top:`calc(-1 * ${m.spacing2Xs})`,right:0}})}}var H=n=>{var c=n,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:a,children:s,aria:l={closeIconLabel:"Close"}}=c,d=h(c,["onClose","title","subtitle","testId","className","children","aria"]);let M=J();return P__default.createElement(Flex,f(i({},d),{className:cx(M.root,a),testId:r,alignItems:"center",justifyContent:"space-between"}),P__default.createElement(Subheading,{as:"h2",isTruncated:true,marginBottom:"none"},e,t&&P__default.createElement(Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),s,o&&P__default.createElement(Flex,{alignItems:"center",className:M.buttonContainer},P__default.createElement(IconButton,{variant:"transparent","aria-label":l.closeIconLabel,size:"small",icon:P__default.createElement(XIcon,{size:"small"}),onClick:()=>{o();}})))};H.displayName="ModalHeader";function U(){return {root:css({padding:`${m.spacingM} ${m.spacingL}`,color:m.gray700,fontSize:m.fontSizeM,fontFamily:m.fontStackPrimary,lineHeight:m.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var O=a=>{var s=a,{testId:o="cf-ui-modal-content",className:e,children:t}=s,r=h(s,["testId","className","children"]);let l=U();return P__default.createElement(Box,f(i({},r),{as:"div",className:cx(l.root,e),testId:o}),t)};O.displayName="ModalContent";function V(o){let e=cx(css({backgroundColor:m.colorWhite,borderRadius:o.size==="zen"?0:m.borderRadiusMedium,boxShadow:m.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${m.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${m.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"}),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 - ${m.spacingXl})`,maxHeight:`calc(100vh - ${m.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:css({display:"block"}),base:{root:cx(css({zIndex:m.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 ${m.transitionDurationDefault} ${m.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:m.zIndexModal,opacity:0,transition:`opacity ${m.transitionDurationDefault} ${m.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center",padding:m.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 yo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function go(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=c=>{var M=c,{allowHeightOverflow:o=false,position:e="center",shouldCloseOnEscapePress:t=true,shouldCloseOnOverlayClick:r=true,size:a="medium",testId:s="cf-ui-modal",topOffset:l="50px",aria:d}=M,n=h(M,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var T,I;let S=P.useRef(null),b=f(i({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:a,testId:s,topOffset:l}),u=V({position:e,size:a,allowHeightOverflow:o,className:n.className,overlayClassName:(T=n.overlayProps)==null?void 0:T.className}),k=()=>{var L,z;let C=S.current;if(C){let E=document.activeElement;if(C!==E&&C.contains(E))return}let v=(L=b.initialFocusRef)==null?void 0:L.current;v?(z=v.focus)==null||z.call(v):C&&go(C);},F=(...C)=>{b.onAfterOpen&&b.onAfterOpen(...C),k();},W=()=>P.createElement(P.Fragment,null,n.title&&P.createElement(H,i({title:n.title,subtitle:n.subtitle,onClose:b.onClose},n.modalHeaderProps)),P.createElement(O,i({},n.modalContentProps),typeof n.children=="function"?null:n.children));return P.createElement(Mo,{ariaHideApp:false,aria:d,onRequestClose:b.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:true,shouldReturnFocusAfterClose:true,portalClassName:u.portal,style:{content:{top:e==="center"?0:l},overlay:(I=n.overlayProps)==null?void 0:I.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:C=>{S.current=C;}},P.createElement(Box,{testId:s,style:{width:yo[a]||a},className:u.modal,"data-modal-root":true},typeof n.children=="function"?n.children(b):W()))};j.displayName="Modal";function Z(){return {root:css({borderBottomLeftRadius:m.borderRadiusMedium,borderBottomRightRadius:m.borderRadiusMedium,padding:`${m.spacingS} ${m.spacingM}`,width:"100%",boxSizing:"border-box"})}}var A=a=>{var s=a,{testId:o="cf-ui-modal-controls",className:e,children:t}=s,r=h(s,["testId","className","children"]);let l=Z();return P__default.createElement(Flex,f(i({},r),{className:cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),P__default.createElement(ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var x=j;x.Content=O;x.Header=H;x.Controls=A;var eo=({allowHeightOverflow:o=false,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:a="Confirm",confirmTestId:s="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:d=false,isConfirmLoading:n=false,isShown:c,modalContentProps:M,modalControlsProps:S,modalHeaderProps:b,onCancel:u,onConfirm:k,shouldCloseOnEscapePress:F=true,shouldCloseOnOverlayClick:W=true,size:T="medium",testId:I="cf-ui-modal-confirm",title:C="Are you sure?",initialFocusRef:v})=>{let L=P__default.useRef(null),z=a?P__default.createElement(Button,{testId:s,isDisabled:d,isLoading:n,variant:l,size:"small",onClick:()=>k()},a):null,E=e?P__default.createElement(Button,{testId:t,variant:"secondary",onClick:u,size:"small",ref:v||L},e):null;return P__default.createElement(x,{testId:I,isShown:c,onClose:u,size:T,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:L},()=>P__default.createElement(P__default.Fragment,null,P__default.createElement(x.Header,f(i({title:C||""},b),{onClose:u})),P__default.createElement(x.Content,i({},M),r),P__default.createElement(x.Controls,i({},S),E,z)))};eo.displayName="ModalConfirm";var Ro=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 D(this,null,function*(){let o=Array.from(B.entries());yield Promise.all(o.map(l=>D(null,[l],function*([e,{root:t,render:r,currentConfig:a,delay:s}]){try{let d=f(i({},a),{isShown:!1});r(d),yield new Promise(n=>setTimeout(n,s)),t.unmount();}finally{let d=document.getElementById(e);d&&d.remove(),B.delete(e);}})));})}function wo(o,e={}){e=i({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,r=Ro(t),a=vo.createRoot(r);return new Promise(s=>{let l;function d(c){return D(this,null,function*(){l=f(i({},l),{isShown:false}),n(l),yield new Promise(M=>setTimeout(M,e.delay)),a.unmount(),r.remove(),B.delete(t),s(c);})}function n({onClose:c,isShown:M}){a.render(o({onClose:c,isShown:M}));}l={onClose:d,isShown:true},n(l),B.set(t,{root:a,render:n,currentConfig:l,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};export{x as Modal,eo as ModalConfirm,O as ModalContent,A as ModalControls,H as ModalHeader,Oo as ModalLauncher};//# sourceMappingURL=index.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/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"]}
1	+ {"version":3,"sources":["../../src/ModalHeader/ModalHeader.styles.ts","../../src/ModalHeader/ModalHeader.tsx","../../src/ModalContent/ModalContent.styles.ts","../../src/ModalContent/ModalContent.tsx","../../src/Modal.styles.ts","../../src/Modal.tsx","../../src/ModalControls/ModalControls.styles.tsx","../../src/ModalControls/ModalControls.tsx","../../src/CompoundModal.tsx","../../src/ModalConfirm/ModalConfirm.tsx","../../src/ModalLauncher/ModalLauncher.tsx"],"names":["getModalHeaderStyles","css","tokens","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","React","Flex","__spreadProps","__spreadValues","cx","Subheading","Text","IconButton","XIcon","getModalContentStyles","ModalContent","Box","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","g","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ReactModal","ref","getModalControlStyles","ModalControls","ButtonGroup","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","Button","cancelButton","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","modals","_0","root","render","currentConfig","delay","config","resolveDelay","el","open","componentRenderer","options","ReactDOM","resolve","result","ModalLauncher"],"mappings":"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","file":"index.js","sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\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/css';\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?: (event?: React.MouseEvent \| React.KeyboardEvent) => void;\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 { css } from '@emotion/css';\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 React from 'react';\nimport { cx } from '@emotion/css';\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 tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\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 * 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 {typeof otherProps.children === 'function'\n ? null\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 { css } from '@emotion/css';\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 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/css';\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 { 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\nexport interface ModalLauncherComponentRendererProps<T = void> {\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<T = unknown> {\n root: ReactDOM.Root;\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<T>) => void;\n currentConfig: ModalLauncherComponentRendererProps<T>;\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 const modals = Array.from(openModalsIds.entries());\n await Promise.all(\n modals.map(async ([rootElId, { root, render, currentConfig, delay }]) => {\n try {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n root.unmount();\n } finally {\n const el = document.getElementById(rootElId);\n if (el) el.remove();\n openModalsIds.delete(rootElId);\n }\n }),\n );\n}\n\nfunction open<T = void>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => React.ReactElement,\n options: ModalLauncherOpenOptions = {},\n): Promise<T \| undefined> {\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 const root = ReactDOM.createRoot(rootDom);\n\n return new Promise((resolve) => {\n let currentConfig: ModalLauncherComponentRendererProps<T>;\n\n async function onClose(result?: T) {\n currentConfig = { ...currentConfig, isShown: false };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n root.unmount();\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(result);\n }\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n root.render(componentRenderer({ onClose, isShown }));\n }\n\n currentConfig = { onClose, isShown: true };\n render(currentConfig);\n\n openModalsIds.set(rootElId, {\n root,\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 CHANGED Viewed

@@ -6,13 +6,13 @@ import { PropsWithHTMLElement, CommonProps, ExpandProps } from '@contentful/f36-
 interface ModalHeaderInternalProps extends CommonProps {
     title: string;
     subtitle?: string;
-    onClose?: Function;
+    onClose?: (event?: React__default.MouseEvent | React__default.KeyboardEvent) => void;
     children?: React__default.ReactNode;
     aria?: {
         closeIconLabel?: string;
     };
 }
-declare type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
+type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
 declare const ModalHeader: {
     ({ onClose, title, subtitle, testId, className, children, aria, ...otherProps }: ModalHeaderProps): React__default.ReactElement;
     displayName: string;
@@ -21,14 +21,14 @@ declare const ModalHeader: {
 interface ModalContentInternalProps extends CommonProps {
     children: React__default.ReactNode;
 }
-declare type ModalContentProps = PropsWithHTMLElement<ModalContentInternalProps, 'div'>;
+type ModalContentProps = PropsWithHTMLElement<ModalContentInternalProps, 'div'>;
 declare const ModalContent: {
-    ({ testId, className, children, ...otherProps }: ModalContentProps): JSX.Element;
+    ({ testId, className, children, ...otherProps }: ModalContentProps): React__default.JSX.Element;
     displayName: string;
 };
-declare type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen' | 'fullscreen';
-declare type ModalPositionType = 'center' | 'top';
+type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen' | 'fullscreen';
+type ModalPositionType = 'center' | 'top';
 interface ModalProps extends CommonProps {
     /**
@@ -103,22 +103,22 @@ interface ModalProps extends CommonProps {
     initialFocusRef?: React.RefObject<HTMLElement>;
     children: React.ReactNode | RenderModal;
 }
-declare type RenderModal = (modalProps: ModalProps) => React.ReactNode;
+type RenderModal = (modalProps: ModalProps) => React.ReactNode;
 declare const Modal$1: {
-    ({ allowHeightOverflow, position, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, topOffset, aria, ...otherProps }: ExpandProps<ModalProps>): JSX.Element;
+    ({ allowHeightOverflow, position, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, topOffset, aria, ...otherProps }: ExpandProps<ModalProps>): React.JSX.Element;
     displayName: string;
 };
 interface ModalControlsInternalProps extends CommonProps {
     children: React__default.ReactElement[] | React__default.ReactElement;
 }
-declare type ModalControlsProps = PropsWithHTMLElement<ModalControlsInternalProps, 'div'>;
+type ModalControlsProps = PropsWithHTMLElement<ModalControlsInternalProps, 'div'>;
 declare const ModalControls: {
     ({ testId, className, children, ...otherProps }: ModalControlsProps): React__default.ReactElement;
     displayName: string;
 };
-declare type CompoundModal = typeof Modal$1 & {
+type CompoundModal = typeof Modal$1 & {
     Content: typeof ModalContent;
     Header: typeof ModalHeader;
     Controls: typeof ModalControls;
@@ -200,11 +200,11 @@ interface ModalConfirmProps {
     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;
+    ({ allowHeightOverflow, cancelLabel, cancelTestId, children, confirmLabel, confirmTestId, intent, isConfirmDisabled, isConfirmLoading, isShown, modalContentProps, modalControlsProps, modalHeaderProps, onCancel, onConfirm, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, title, initialFocusRef, }: ModalConfirmProps): React__default.JSX.Element;
     displayName: string;
 };
-interface ModalLauncherComponentRendererProps<T = any> {
+interface ModalLauncherComponentRendererProps<T = void> {
     isShown: boolean;
     onClose: (result?: T) => void;
 }
@@ -220,10 +220,10 @@ interface ModalLauncherOpenOptions {
     delay?: number;
 }
 declare function closeAll(): Promise<void>;
-declare function open<T = any>(componentRenderer: (props: ModalLauncherComponentRendererProps<T>) => JSX.Element, options?: ModalLauncherOpenOptions): Promise<T>;
+declare function open<T = void>(componentRenderer: (props: ModalLauncherComponentRendererProps<T>) => React__default.ReactElement, options?: ModalLauncherOpenOptions): Promise<T | undefined>;
 declare const ModalLauncher: {
     open: typeof open;
     closeAll: typeof closeAll;
 };
-export { Modal, ModalConfirm, ModalConfirmProps, ModalContent, ModalContentProps, ModalControls, ModalControlsProps, ModalHeader, ModalHeaderProps, ModalLauncher, ModalLauncherComponentRendererProps, ModalLauncherOpenOptions, ModalProps };
+export { Modal, ModalConfirm, type ModalConfirmProps, ModalContent, type ModalContentProps, ModalControls, type ModalControlsProps, ModalHeader, type ModalHeaderProps, ModalLauncher, type ModalLauncherComponentRendererProps, type ModalLauncherOpenOptions, type ModalProps };

package/dist/index.d.ts CHANGED Viewed

@@ -6,13 +6,13 @@ import { PropsWithHTMLElement, CommonProps, ExpandProps } from '@contentful/f36-
 interface ModalHeaderInternalProps extends CommonProps {
     title: string;
     subtitle?: string;
-    onClose?: Function;
+    onClose?: (event?: React__default.MouseEvent | React__default.KeyboardEvent) => void;
     children?: React__default.ReactNode;
     aria?: {
         closeIconLabel?: string;
     };
 }
-declare type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
+type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
 declare const ModalHeader: {
     ({ onClose, title, subtitle, testId, className, children, aria, ...otherProps }: ModalHeaderProps): React__default.ReactElement;
     displayName: string;
@@ -21,14 +21,14 @@ declare const ModalHeader: {
 interface ModalContentInternalProps extends CommonProps {
     children: React__default.ReactNode;
 }
-declare type ModalContentProps = PropsWithHTMLElement<ModalContentInternalProps, 'div'>;
+type ModalContentProps = PropsWithHTMLElement<ModalContentInternalProps, 'div'>;
 declare const ModalContent: {
-    ({ testId, className, children, ...otherProps }: ModalContentProps): JSX.Element;
+    ({ testId, className, children, ...otherProps }: ModalContentProps): React__default.JSX.Element;
     displayName: string;
 };
-declare type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen' | 'fullscreen';
-declare type ModalPositionType = 'center' | 'top';
+type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen' | 'fullscreen';
+type ModalPositionType = 'center' | 'top';
 interface ModalProps extends CommonProps {
     /**
@@ -103,22 +103,22 @@ interface ModalProps extends CommonProps {
     initialFocusRef?: React.RefObject<HTMLElement>;
     children: React.ReactNode | RenderModal;
 }
-declare type RenderModal = (modalProps: ModalProps) => React.ReactNode;
+type RenderModal = (modalProps: ModalProps) => React.ReactNode;
 declare const Modal$1: {
-    ({ allowHeightOverflow, position, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, topOffset, aria, ...otherProps }: ExpandProps<ModalProps>): JSX.Element;
+    ({ allowHeightOverflow, position, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, topOffset, aria, ...otherProps }: ExpandProps<ModalProps>): React.JSX.Element;
     displayName: string;
 };
 interface ModalControlsInternalProps extends CommonProps {
     children: React__default.ReactElement[] | React__default.ReactElement;
 }
-declare type ModalControlsProps = PropsWithHTMLElement<ModalControlsInternalProps, 'div'>;
+type ModalControlsProps = PropsWithHTMLElement<ModalControlsInternalProps, 'div'>;
 declare const ModalControls: {
     ({ testId, className, children, ...otherProps }: ModalControlsProps): React__default.ReactElement;
     displayName: string;
 };
-declare type CompoundModal = typeof Modal$1 & {
+type CompoundModal = typeof Modal$1 & {
     Content: typeof ModalContent;
     Header: typeof ModalHeader;
     Controls: typeof ModalControls;
@@ -200,11 +200,11 @@ interface ModalConfirmProps {
     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;
+    ({ allowHeightOverflow, cancelLabel, cancelTestId, children, confirmLabel, confirmTestId, intent, isConfirmDisabled, isConfirmLoading, isShown, modalContentProps, modalControlsProps, modalHeaderProps, onCancel, onConfirm, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, title, initialFocusRef, }: ModalConfirmProps): React__default.JSX.Element;
     displayName: string;
 };
-interface ModalLauncherComponentRendererProps<T = any> {
+interface ModalLauncherComponentRendererProps<T = void> {
     isShown: boolean;
     onClose: (result?: T) => void;
 }
@@ -220,10 +220,10 @@ interface ModalLauncherOpenOptions {
     delay?: number;
 }
 declare function closeAll(): Promise<void>;
-declare function open<T = any>(componentRenderer: (props: ModalLauncherComponentRendererProps<T>) => JSX.Element, options?: ModalLauncherOpenOptions): Promise<T>;
+declare function open<T = void>(componentRenderer: (props: ModalLauncherComponentRendererProps<T>) => React__default.ReactElement, options?: ModalLauncherOpenOptions): Promise<T | undefined>;
 declare const ModalLauncher: {
     open: typeof open;
     closeAll: typeof closeAll;
 };
-export { Modal, ModalConfirm, ModalConfirmProps, ModalContent, ModalContentProps, ModalControls, ModalControlsProps, ModalHeader, ModalHeaderProps, ModalLauncher, ModalLauncherComponentRendererProps, ModalLauncherOpenOptions, ModalProps };
+export { Modal, ModalConfirm, type ModalConfirmProps, ModalContent, type ModalContentProps, ModalControls, type ModalControlsProps, ModalHeader, type ModalHeaderProps, ModalLauncher, type ModalLauncherComponentRendererProps, type ModalLauncherOpenOptions, type ModalProps };

package/dist/index.js CHANGED Viewed

@@ -1,47 +1,2 @@
-'use strict';
-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 d = require('@contentful/f36-tokens');
-var q = require('react-dom');
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-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 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 = to;
-exports.ModalContent = O;
-exports.ModalControls = D;
-exports.ModalHeader = H;
-exports.ModalLauncher = Oo;
-//# sourceMappingURL=out.js.map
+'use strict';var P=require('react'),Mo=require('react-modal'),f36Core=require('@contentful/f36-core'),css=require('@emotion/css'),f36Icons=require('@contentful/f36-icons'),f36Button=require('@contentful/f36-button'),f36Typography=require('@contentful/f36-typography'),m=require('@contentful/f36-tokens'),vo=require('react-dom/client');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var P__namespace=/*#__PURE__*/_interopNamespace(P);var Mo__default=/*#__PURE__*/_interopDefault(Mo);var m__default=/*#__PURE__*/_interopDefault(m);var vo__default=/*#__PURE__*/_interopDefault(vo);var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:true,configurable:true,writable:true,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if(N)for(var t of N(e))Y.call(e,t)&&q(o,t,e[t]);return o},f=(o,e)=>no(o,ro(e));var h=(o,e)=>{var t={};for(var r in o)G.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&N)for(var r of N(o))e.indexOf(r)<0&&Y.call(o,r)&&(t[r]=o[r]);return t};var D=(o,e,t)=>new Promise((r,a)=>{var s=n=>{try{d(t.next(n));}catch(c){a(c);}},l=n=>{try{d(t.throw(n));}catch(c){a(c);}},d=n=>n.done?r(n.value):Promise.resolve(n.value).then(s,l);d((t=t.apply(o,e)).next());});function J(){return {root:css.css({position:"relative",padding:`${m__default.default.spacingM} ${m__default.default.spacingM} ${m__default.default.spacingM} ${m__default.default.spacingL}`,borderRadius:`${m__default.default.borderRadiusMedium} ${m__default.default.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${m__default.default.gray200}`}),buttonContainer:css.css({position:"relative",width:m__default.default.spacing2Xl,height:m__default.default.spacingL,button:{position:"absolute",top:`calc(-1 * ${m__default.default.spacing2Xs})`,right:0}})}}var H=n=>{var c=n,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:a,children:s,aria:l={closeIconLabel:"Close"}}=c,d=h(c,["onClose","title","subtitle","testId","className","children","aria"]);let M=J();return P__namespace.default.createElement(f36Core.Flex,f(i({},d),{className:css.cx(M.root,a),testId:r,alignItems:"center",justifyContent:"space-between"}),P__namespace.default.createElement(f36Typography.Subheading,{as:"h2",isTruncated:true,marginBottom:"none"},e,t&&P__namespace.default.createElement(f36Typography.Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),s,o&&P__namespace.default.createElement(f36Core.Flex,{alignItems:"center",className:M.buttonContainer},P__namespace.default.createElement(f36Button.IconButton,{variant:"transparent","aria-label":l.closeIconLabel,size:"small",icon:P__namespace.default.createElement(f36Icons.XIcon,{size:"small"}),onClick:()=>{o();}})))};H.displayName="ModalHeader";function U(){return {root:css.css({padding:`${m__default.default.spacingM} ${m__default.default.spacingL}`,color:m__default.default.gray700,fontSize:m__default.default.fontSizeM,fontFamily:m__default.default.fontStackPrimary,lineHeight:m__default.default.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var O=a=>{var s=a,{testId:o="cf-ui-modal-content",className:e,children:t}=s,r=h(s,["testId","className","children"]);let l=U();return P__namespace.default.createElement(f36Core.Box,f(i({},r),{as:"div",className:css.cx(l.root,e),testId:o}),t)};O.displayName="ModalContent";function V(o){let e=css.cx(css.css({backgroundColor:m__default.default.colorWhite,borderRadius:o.size==="zen"?0:m__default.default.borderRadiusMedium,boxShadow:m__default.default.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${m__default.default.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${m__default.default.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"}),o.allowHeightOverflow?css.css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?css.css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?css.css({maxWidth:`calc(100vw - ${m__default.default.spacingXl})`,maxHeight:`calc(100vh - ${m__default.default.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:css.css({display:"block"}),base:{root:css.cx(css.css({zIndex:m__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 ${m__default.default.transitionDurationDefault} ${m__default.default.transitionEasingDefault}`}),o.size==="zen"?css.css({width:"100%",height:"100%"}):null),afterOpen:css.css({transform:"scale(1) !important"}),beforeClose:css.css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:css.cx(css.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:m__default.default.zIndexModal,opacity:0,transition:`opacity ${m__default.default.transitionDurationDefault} ${m__default.default.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center",padding:m__default.default.spacing2Xl}),o.size==="fullscreen"?css.css({padding:0}):null,o.position==="center"?css.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css.css({opacity:"1 !important"}),beforeClose:css.css({opacity:"0 !important"})},modal:e}}var yo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function go(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=c=>{var M=c,{allowHeightOverflow:o=false,position:e="center",shouldCloseOnEscapePress:t=true,shouldCloseOnOverlayClick:r=true,size:a="medium",testId:s="cf-ui-modal",topOffset:l="50px",aria:d}=M,n=h(M,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var T,I;let S=P__namespace.useRef(null),b=f(i({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:a,testId:s,topOffset:l}),u=V({position:e,size:a,allowHeightOverflow:o,className:n.className,overlayClassName:(T=n.overlayProps)==null?void 0:T.className}),k=()=>{var L,z;let C=S.current;if(C){let E=document.activeElement;if(C!==E&&C.contains(E))return}let v=(L=b.initialFocusRef)==null?void 0:L.current;v?(z=v.focus)==null||z.call(v):C&&go(C);},F=(...C)=>{b.onAfterOpen&&b.onAfterOpen(...C),k();},W=()=>P__namespace.createElement(P__namespace.Fragment,null,n.title&&P__namespace.createElement(H,i({title:n.title,subtitle:n.subtitle,onClose:b.onClose},n.modalHeaderProps)),P__namespace.createElement(O,i({},n.modalContentProps),typeof n.children=="function"?null:n.children));return P__namespace.createElement(Mo__default.default,{ariaHideApp:false,aria:d,onRequestClose:b.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:true,shouldReturnFocusAfterClose:true,portalClassName:u.portal,style:{content:{top:e==="center"?0:l},overlay:(I=n.overlayProps)==null?void 0:I.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:C=>{S.current=C;}},P__namespace.createElement(f36Core.Box,{testId:s,style:{width:yo[a]||a},className:u.modal,"data-modal-root":true},typeof n.children=="function"?n.children(b):W()))};j.displayName="Modal";function Z(){return {root:css.css({borderBottomLeftRadius:m__default.default.borderRadiusMedium,borderBottomRightRadius:m__default.default.borderRadiusMedium,padding:`${m__default.default.spacingS} ${m__default.default.spacingM}`,width:"100%",boxSizing:"border-box"})}}var A=a=>{var s=a,{testId:o="cf-ui-modal-controls",className:e,children:t}=s,r=h(s,["testId","className","children"]);let l=Z();return P__namespace.default.createElement(f36Core.Flex,f(i({},r),{className:css.cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),P__namespace.default.createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var x=j;x.Content=O;x.Header=H;x.Controls=A;var eo=({allowHeightOverflow:o=false,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:a="Confirm",confirmTestId:s="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:d=false,isConfirmLoading:n=false,isShown:c,modalContentProps:M,modalControlsProps:S,modalHeaderProps:b,onCancel:u,onConfirm:k,shouldCloseOnEscapePress:F=true,shouldCloseOnOverlayClick:W=true,size:T="medium",testId:I="cf-ui-modal-confirm",title:C="Are you sure?",initialFocusRef:v})=>{let L=P__namespace.default.useRef(null),z=a?P__namespace.default.createElement(f36Button.Button,{testId:s,isDisabled:d,isLoading:n,variant:l,size:"small",onClick:()=>k()},a):null,E=e?P__namespace.default.createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:u,size:"small",ref:v||L},e):null;return P__namespace.default.createElement(x,{testId:I,isShown:c,onClose:u,size:T,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:L},()=>P__namespace.default.createElement(P__namespace.default.Fragment,null,P__namespace.default.createElement(x.Header,f(i({title:C||""},b),{onClose:u})),P__namespace.default.createElement(x.Content,i({},M),r),P__namespace.default.createElement(x.Controls,i({},S),E,z)))};eo.displayName="ModalConfirm";var Ro=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 D(this,null,function*(){let o=Array.from(B.entries());yield Promise.all(o.map(l=>D(null,[l],function*([e,{root:t,render:r,currentConfig:a,delay:s}]){try{let d=f(i({},a),{isShown:!1});r(d),yield new Promise(n=>setTimeout(n,s)),t.unmount();}finally{let d=document.getElementById(e);d&&d.remove(),B.delete(e);}})));})}function wo(o,e={}){e=i({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,r=Ro(t),a=vo__default.default.createRoot(r);return new Promise(s=>{let l;function d(c){return D(this,null,function*(){l=f(i({},l),{isShown:false}),n(l),yield new Promise(M=>setTimeout(M,e.delay)),a.unmount(),r.remove(),B.delete(t),s(c);})}function n({onClose:c,isShown:M}){a.render(o({onClose:c,isShown:M}));}l={onClose:d,isShown:true},n(l),B.set(t,{root:a,render:n,currentConfig:l,delay:e.delay});})}var Oo={open:wo,closeAll:Ho};exports.Modal=x;exports.ModalConfirm=eo;exports.ModalContent=O;exports.ModalControls=A;exports.ModalHeader=H;exports.ModalLauncher=Oo;//# sourceMappingURL=index.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/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"]}
1	+ {"version":3,"sources":["../src/ModalHeader/ModalHeader.styles.ts","../src/ModalHeader/ModalHeader.tsx","../src/ModalContent/ModalContent.styles.ts","../src/ModalContent/ModalContent.tsx","../src/Modal.styles.ts","../src/Modal.tsx","../src/ModalControls/ModalControls.styles.tsx","../src/ModalControls/ModalControls.tsx","../src/CompoundModal.tsx","../src/ModalConfirm/ModalConfirm.tsx","../src/ModalLauncher/ModalLauncher.tsx"],"names":["getModalHeaderStyles","css","tokens","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","React","Flex","__spreadProps","__spreadValues","cx","Subheading","Text","IconButton","XIcon","getModalContentStyles","ModalContent","Box","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","g","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ReactModal","ref","getModalControlStyles","ModalControls","ButtonGroup","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","Button","cancelButton","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","modals","_0","root","render","currentConfig","delay","config","resolveDelay","el","open","componentRenderer","options","ReactDOM","resolve","result","ModalLauncher"],"mappings":"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","file":"index.js","sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\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/css';\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?: (event?: React.MouseEvent \| React.KeyboardEvent) => void;\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 { css } from '@emotion/css';\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 React from 'react';\nimport { cx } from '@emotion/css';\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 tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\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 * 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 {typeof otherProps.children === 'function'\n ? null\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 { css } from '@emotion/css';\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 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/css';\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 { 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\nexport interface ModalLauncherComponentRendererProps<T = void> {\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<T = unknown> {\n root: ReactDOM.Root;\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<T>) => void;\n currentConfig: ModalLauncherComponentRendererProps<T>;\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 const modals = Array.from(openModalsIds.entries());\n await Promise.all(\n modals.map(async ([rootElId, { root, render, currentConfig, delay }]) => {\n try {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n root.unmount();\n } finally {\n const el = document.getElementById(rootElId);\n if (el) el.remove();\n openModalsIds.delete(rootElId);\n }\n }),\n );\n}\n\nfunction open<T = void>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => React.ReactElement,\n options: ModalLauncherOpenOptions = {},\n): Promise<T \| undefined> {\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 const root = ReactDOM.createRoot(rootDom);\n\n return new Promise((resolve) => {\n let currentConfig: ModalLauncherComponentRendererProps<T>;\n\n async function onClose(result?: T) {\n currentConfig = { ...currentConfig, isShown: false };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n root.unmount();\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(result);\n }\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n root.render(componentRenderer({ onClose, isShown }));\n }\n\n currentConfig = { onClose, isShown: true };\n render(currentConfig);\n\n openModalsIds.set(rootElId, {\n root,\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,23 +1,23 @@
 {
   "name": "@contentful/f36-modal",
-  "version": "5.5.0",
+  "version": "6.0.0-alpha.1",
   "description": "Forma 36: Modal component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-button": "^5.5.0",
-    "@contentful/f36-core": "^5.5.0",
-    "@contentful/f36-icons": "^5.5.0",
-    "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/f36-typography": "^5.5.0",
+    "@contentful/f36-button": "^6.0.0-alpha.0",
+    "@contentful/f36-core": "^6.0.0-alpha.0",
+    "@contentful/f36-icons": "^6.0.0-alpha.0",
+    "@contentful/f36-tokens": "^6.0.0-alpha.0",
+    "@contentful/f36-typography": "^6.0.0-alpha.0",
     "@types/react-modal": "^3.13.1",
-    "emotion": "^10.0.17",
-    "react-modal": "^3.16.1"
+    "@emotion/css": "^11.13.5",
+    "react-modal": "^3.16.3"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0"
   },
   "license": "MIT",
   "files": [