@contentful/f36-modal 4.36.0 → 4.37.1

package/dist/esm/index.js

@@ -9,7 +9,7 @@ import { Subheading } from '@contentful/f36-typography';
 import m from '@contentful/f36-tokens';
 import X from 'react-dom';
 
-var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,l=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if(E)for(var t of E(e))Y.call(e,t)&&q(o,t,e[t]);return o},u=(o,e)=>no(o,ro(e));var h=(o,e)=>{var t={};for(var n in o)G.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&&Y.call(o,n)&&(t[n]=o[n]);return t};var F=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{d(t.next(r));}catch(M){i(M);}},s=r=>{try{d(t.throw(r));}catch(M){i(M);}},d=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,s);d((t=t.apply(o,e)).next());});function K(){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.gray300}`}),buttonContainer:css({position:"relative",width:m.spacing2Xl,height:m.spacingL,button:{position:"absolute",top:`calc(-1 * ${m.spacing2Xs})`,right:0}})}}var v=a=>{var s=a,{onClose:o,title:e,testId:t="cf-ui-modal-header",className:n}=s,i=h(s,["onClose","title","testId","className"]);let d=K();return P__default.createElement(Flex,u(l({},i),{className:cx(d.root,n),testId:t,alignItems:"center",justifyContent:"space-between"}),P__default.createElement(Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e),o&&P__default.createElement(Flex,{alignItems:"center",className:d.buttonContainer},P__default.createElement(Button,{variant:"transparent","aria-label":"Close",startIcon:P__default.createElement(CloseIcon,{size:"small"}),onClick:()=>{o();},size:"small"})))};v.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 R=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=h(a,["testId","className","children"]);let s=U();return P__default.createElement(Box,u(l({},n),{as:"div",className:cx(s.root,e),testId:o}),t)};R.displayName="ModalContent";function V(o){let e=cx(css({margin:m.spacing2Xl,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.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)"})},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"}),o.position==="center"?css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css({opacity:1}),beforeClose:css({opacity:0})},modal:e}}var Co={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function yo(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=M=>{var S=M,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:s="50px",aria:d}=S,r=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var I,L;let z=P.useRef(null),x=u(l({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:s}),c=V({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(I=r.overlayProps)==null?void 0:I.className}),B=()=>{var O,N;let f=z.current;if(f){let T=document.activeElement;if(f!==T&&f.contains(T))return}let b=(O=x.initialFocusRef)==null?void 0:O.current;b?(N=b.focus)==null||N.call(b):f&&yo(f);},$=(...f)=>{x.onAfterOpen&&x.onAfterOpen(...f),B();},k=()=>P.createElement(P.Fragment,null,r.title&&P.createElement(v,l({title:r.title,onClose:x.onClose},r.modalHeaderProps)),P.createElement(R,l({},r.modalContentProps),r.children));return P.createElement(uo,{ariaHideApp:!1,aria:d,onRequestClose:x.onClose,isOpen:r.isShown,onAfterOpen:$,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:c.portal,style:{content:{top:e==="center"?0:s},overlay:(L=r.overlayProps)==null?void 0:L.style},className:{base:c.base.root,afterOpen:c.base.afterOpen,beforeClose:c.base.beforeClose},overlayClassName:{base:c.modalOverlay.root,afterOpen:c.modalOverlay.afterOpen,beforeClose:c.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:f=>{z.current=f;}},P.createElement(Box,{testId:a,style:{width:Co[i]||i},className:c.modal,"data-modal-root":!0},typeof r.children=="function"?r.children(x):k()))};j.displayName="Modal";var A=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,n=h(a,["testId","className","children"]);return P__default.createElement(Flex,u(l({},n),{className:e,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),P__default.createElement(ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var g=j;g.Content=R;g.Header=v;g.Controls=A;var oo=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:s="positive",isConfirmDisabled:d=!1,isConfirmLoading:r=!1,isShown:M,modalContentProps:S,modalControlsProps:z,modalHeaderProps:x,onCancel:c,onConfirm:B,shouldCloseOnEscapePress:$=!0,shouldCloseOnOverlayClick:k=!0,size:I="medium",testId:L="cf-ui-modal-confirm",title:f="Are you sure?",initialFocusRef:b})=>{let O=P__default.useRef(null),N=i?P__default.createElement(Button,{testId:a,isDisabled:d,isLoading:r,variant:s,size:"small",onClick:()=>B()},i):null,T=e?P__default.createElement(Button,{testId:t,variant:"secondary",onClick:c,size:"small",ref:b||O},e):null;return P__default.createElement(g,{testId:L,isShown:M,onClose:c,size:I,shouldCloseOnOverlayClick:k,shouldCloseOnEscapePress:$,allowHeightOverflow:o,initialFocusRef:O},()=>P__default.createElement(P__default.Fragment,null,P__default.createElement(g.Header,l({title:f||""},x)),P__default.createElement(g.Content,l({},S),n),P__default.createElement(g.Controls,l({},z),T,N)))};oo.displayName="ModalConfirm";var eo=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},D=new Map;function xo(){D.forEach((i,a)=>F(this,[i,a],function*({render:o,currentConfig:e,delay:t},n){let s=u(l({},e),{isShown:!1});o(s),yield new Promise(d=>setTimeout(d,t)),X.unmountComponentAtNode(eo(n)),D.delete(n);}));}function ho(o,e={}){e=l({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,n=eo(t);return new Promise(i=>{let a={onClose:d,isShown:!0};function s({onClose:r,isShown:M}){X.render(o({onClose:r,isShown:M}),n);}function d(r){return F(this,null,function*(){a=u(l({},a),{isShown:!1}),s(a),yield new Promise(M=>setTimeout(M,e.delay)),X.unmountComponentAtNode(n),n.remove(),D.delete(t),i(r);})}s(a),D.set(t,{render:s,currentConfig:a,delay:e.delay});})}var bo={open:ho,closeAll:xo};
+var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,l=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if(E)for(var t of E(e))Y.call(e,t)&&q(o,t,e[t]);return o},u=(o,e)=>no(o,ro(e));var h=(o,e)=>{var t={};for(var n in o)G.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&&Y.call(o,n)&&(t[n]=o[n]);return t};var F=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{d(t.next(r));}catch(M){i(M);}},s=r=>{try{d(t.throw(r));}catch(M){i(M);}},d=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,s);d((t=t.apply(o,e)).next());});function K(){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.gray300}`}),buttonContainer:css({position:"relative",width:m.spacing2Xl,height:m.spacingL,button:{position:"absolute",top:`calc(-1 * ${m.spacing2Xs})`,right:0}})}}var v=a=>{var s=a,{onClose:o,title:e,testId:t="cf-ui-modal-header",className:n}=s,i=h(s,["onClose","title","testId","className"]);let d=K();return P__default.createElement(Flex,u(l({},i),{className:cx(d.root,n),testId:t,alignItems:"center",justifyContent:"space-between"}),P__default.createElement(Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e),o&&P__default.createElement(Flex,{alignItems:"center",className:d.buttonContainer},P__default.createElement(Button,{variant:"transparent","aria-label":"Close",startIcon:P__default.createElement(CloseIcon,{size:"small"}),onClick:()=>{o();},size:"small"})))};v.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 R=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=h(a,["testId","className","children"]);let s=U();return P__default.createElement(Box,u(l({},n),{as:"div",className:cx(s.root,e),testId:o}),t)};R.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.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)"})},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.position==="center"?css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css({opacity:1}),beforeClose:css({opacity:0})},modal:e}}var Co={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function yo(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=M=>{var S=M,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:s="50px",aria:d}=S,r=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var I,L;let z=P.useRef(null),x=u(l({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:s}),c=V({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(I=r.overlayProps)==null?void 0:I.className}),B=()=>{var O,N;let f=z.current;if(f){let T=document.activeElement;if(f!==T&&f.contains(T))return}let b=(O=x.initialFocusRef)==null?void 0:O.current;b?(N=b.focus)==null||N.call(b):f&&yo(f);},$=(...f)=>{x.onAfterOpen&&x.onAfterOpen(...f),B();},k=()=>P.createElement(P.Fragment,null,r.title&&P.createElement(v,l({title:r.title,onClose:x.onClose},r.modalHeaderProps)),P.createElement(R,l({},r.modalContentProps),r.children));return P.createElement(uo,{ariaHideApp:!1,aria:d,onRequestClose:x.onClose,isOpen:r.isShown,onAfterOpen:$,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:c.portal,style:{content:{top:e==="center"?0:s},overlay:(L=r.overlayProps)==null?void 0:L.style},className:{base:c.base.root,afterOpen:c.base.afterOpen,beforeClose:c.base.beforeClose},overlayClassName:{base:c.modalOverlay.root,afterOpen:c.modalOverlay.afterOpen,beforeClose:c.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:f=>{z.current=f;}},P.createElement(Box,{testId:a,style:{width:Co[i]||i},className:c.modal,"data-modal-root":!0},typeof r.children=="function"?r.children(x):k()))};j.displayName="Modal";var A=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,n=h(a,["testId","className","children"]);return P__default.createElement(Flex,u(l({},n),{className:e,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),P__default.createElement(ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var g=j;g.Content=R;g.Header=v;g.Controls=A;var oo=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:s="positive",isConfirmDisabled:d=!1,isConfirmLoading:r=!1,isShown:M,modalContentProps:S,modalControlsProps:z,modalHeaderProps:x,onCancel:c,onConfirm:B,shouldCloseOnEscapePress:$=!0,shouldCloseOnOverlayClick:k=!0,size:I="medium",testId:L="cf-ui-modal-confirm",title:f="Are you sure?",initialFocusRef:b})=>{let O=P__default.useRef(null),N=i?P__default.createElement(Button,{testId:a,isDisabled:d,isLoading:r,variant:s,size:"small",onClick:()=>B()},i):null,T=e?P__default.createElement(Button,{testId:t,variant:"secondary",onClick:c,size:"small",ref:b||O},e):null;return P__default.createElement(g,{testId:L,isShown:M,onClose:c,size:I,shouldCloseOnOverlayClick:k,shouldCloseOnEscapePress:$,allowHeightOverflow:o,initialFocusRef:O},()=>P__default.createElement(P__default.Fragment,null,P__default.createElement(g.Header,l({title:f||""},x)),P__default.createElement(g.Content,l({},S),n),P__default.createElement(g.Controls,l({},z),T,N)))};oo.displayName="ModalConfirm";var eo=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},D=new Map;function xo(){D.forEach((i,a)=>F(this,[i,a],function*({render:o,currentConfig:e,delay:t},n){let s=u(l({},e),{isShown:!1});o(s),yield new Promise(d=>setTimeout(d,t)),X.unmountComponentAtNode(eo(n)),D.delete(n);}));}function ho(o,e={}){e=l({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,n=eo(t);return new Promise(i=>{let a={onClose:d,isShown:!0};function s({onClose:r,isShown:M}){X.render(o({onClose:r,isShown:M}),n);}function d(r){return F(this,null,function*(){a=u(l({},a),{isShown:!1}),s(a),yield new Promise(M=>setTimeout(M,e.delay)),X.unmountComponentAtNode(n),n.remove(),D.delete(t),i(r);})}s(a),D.set(t,{render:s,currentConfig:a,delay:e.delay});})}var bo={open:ho,closeAll:xo};
 
 export { g as Modal, oo as ModalConfirm, R as ModalContent, A as ModalControls, v as ModalHeader, bo as ModalLauncher };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/index.js

@@ -38,7 +38,7 @@ var uo__default = /*#__PURE__*/_interopDefaultLegacy(uo);
 var m__default = /*#__PURE__*/_interopDefaultLegacy(m);
 var X__default = /*#__PURE__*/_interopDefaultLegacy(X);
 
-var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,l=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if(E)for(var t of E(e))Y.call(e,t)&&q(o,t,e[t]);return o},u=(o,e)=>no(o,ro(e));var h=(o,e)=>{var t={};for(var n in o)G.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&&Y.call(o,n)&&(t[n]=o[n]);return t};var F=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{d(t.next(r));}catch(M){i(M);}},s=r=>{try{d(t.throw(r));}catch(M){i(M);}},d=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,s);d((t=t.apply(o,e)).next());});function K(){return {root:emotion.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"].gray300}`}),buttonContainer:emotion.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 v=a=>{var s=a,{onClose:o,title:e,testId:t="cf-ui-modal-header",className:n}=s,i=h(s,["onClose","title","testId","className"]);let d=K();return P__default["default"].createElement(f36Core.Flex,u(l({},i),{className:emotion.cx(d.root,n),testId:t,alignItems:"center",justifyContent:"space-between"}),P__default["default"].createElement(f36Typography.Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e),o&&P__default["default"].createElement(f36Core.Flex,{alignItems:"center",className:d.buttonContainer},P__default["default"].createElement(f36Button.Button,{variant:"transparent","aria-label":"Close",startIcon:P__default["default"].createElement(f36Icons.CloseIcon,{size:"small"}),onClick:()=>{o();},size:"small"})))};v.displayName="ModalHeader";function U(){return {root:emotion.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 R=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=h(a,["testId","className","children"]);let s=U();return P__default["default"].createElement(f36Core.Box,u(l({},n),{as:"div",className:emotion.cx(s.root,e),testId:o}),t)};R.displayName="ModalContent";function V(o){let e=emotion.cx(emotion.css({margin:m__default["default"].spacing2Xl,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?emotion.css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?emotion.css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.className);return {portal:emotion.css({display:"block"}),base:{root:emotion.cx(emotion.css({zIndex: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"?emotion.css({width:"100%",height:"100%"}):null),afterOpen:emotion.css({transform:"scale(1) !important"}),beforeClose:emotion.css({transform:o.size==="zen"?"scale(1)":"scale(0.85)"})},modalOverlay:{root:emotion.cx(emotion.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex: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"}),o.position==="center"?emotion.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:emotion.css({opacity:1}),beforeClose:emotion.css({opacity:0})},modal:e}}var Co={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function yo(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=M=>{var S=M,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:s="50px",aria:d}=S,r=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var I,L;let z=P__namespace.useRef(null),x=u(l({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:s}),c=V({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(I=r.overlayProps)==null?void 0:I.className}),B=()=>{var O,N;let f=z.current;if(f){let T=document.activeElement;if(f!==T&&f.contains(T))return}let b=(O=x.initialFocusRef)==null?void 0:O.current;b?(N=b.focus)==null||N.call(b):f&&yo(f);},$=(...f)=>{x.onAfterOpen&&x.onAfterOpen(...f),B();},k=()=>P__namespace.createElement(P__namespace.Fragment,null,r.title&&P__namespace.createElement(v,l({title:r.title,onClose:x.onClose},r.modalHeaderProps)),P__namespace.createElement(R,l({},r.modalContentProps),r.children));return P__namespace.createElement(uo__default["default"],{ariaHideApp:!1,aria:d,onRequestClose:x.onClose,isOpen:r.isShown,onAfterOpen:$,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:c.portal,style:{content:{top:e==="center"?0:s},overlay:(L=r.overlayProps)==null?void 0:L.style},className:{base:c.base.root,afterOpen:c.base.afterOpen,beforeClose:c.base.beforeClose},overlayClassName:{base:c.modalOverlay.root,afterOpen:c.modalOverlay.afterOpen,beforeClose:c.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:f=>{z.current=f;}},P__namespace.createElement(f36Core.Box,{testId:a,style:{width:Co[i]||i},className:c.modal,"data-modal-root":!0},typeof r.children=="function"?r.children(x):k()))};j.displayName="Modal";var A=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,n=h(a,["testId","className","children"]);return P__default["default"].createElement(f36Core.Flex,u(l({},n),{className:e,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),P__default["default"].createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var g=j;g.Content=R;g.Header=v;g.Controls=A;var oo=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:s="positive",isConfirmDisabled:d=!1,isConfirmLoading:r=!1,isShown:M,modalContentProps:S,modalControlsProps:z,modalHeaderProps:x,onCancel:c,onConfirm:B,shouldCloseOnEscapePress:$=!0,shouldCloseOnOverlayClick:k=!0,size:I="medium",testId:L="cf-ui-modal-confirm",title:f="Are you sure?",initialFocusRef:b})=>{let O=P__default["default"].useRef(null),N=i?P__default["default"].createElement(f36Button.Button,{testId:a,isDisabled:d,isLoading:r,variant:s,size:"small",onClick:()=>B()},i):null,T=e?P__default["default"].createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:c,size:"small",ref:b||O},e):null;return P__default["default"].createElement(g,{testId:L,isShown:M,onClose:c,size:I,shouldCloseOnOverlayClick:k,shouldCloseOnEscapePress:$,allowHeightOverflow:o,initialFocusRef:O},()=>P__default["default"].createElement(P__default["default"].Fragment,null,P__default["default"].createElement(g.Header,l({title:f||""},x)),P__default["default"].createElement(g.Content,l({},S),n),P__default["default"].createElement(g.Controls,l({},z),T,N)))};oo.displayName="ModalConfirm";var eo=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},D=new Map;function xo(){D.forEach((i,a)=>F(this,[i,a],function*({render:o,currentConfig:e,delay:t},n){let s=u(l({},e),{isShown:!1});o(s),yield new Promise(d=>setTimeout(d,t)),X__default["default"].unmountComponentAtNode(eo(n)),D.delete(n);}));}function ho(o,e={}){e=l({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,n=eo(t);return new Promise(i=>{let a={onClose:d,isShown:!0};function s({onClose:r,isShown:M}){X__default["default"].render(o({onClose:r,isShown:M}),n);}function d(r){return F(this,null,function*(){a=u(l({},a),{isShown:!1}),s(a),yield new Promise(M=>setTimeout(M,e.delay)),X__default["default"].unmountComponentAtNode(n),n.remove(),D.delete(t),i(r);})}s(a),D.set(t,{render:s,currentConfig:a,delay:e.delay});})}var bo={open:ho,closeAll:xo};
+var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,l=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if(E)for(var t of E(e))Y.call(e,t)&&q(o,t,e[t]);return o},u=(o,e)=>no(o,ro(e));var h=(o,e)=>{var t={};for(var n in o)G.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&&Y.call(o,n)&&(t[n]=o[n]);return t};var F=(o,e,t)=>new Promise((n,i)=>{var a=r=>{try{d(t.next(r));}catch(M){i(M);}},s=r=>{try{d(t.throw(r));}catch(M){i(M);}},d=r=>r.done?n(r.value):Promise.resolve(r.value).then(a,s);d((t=t.apply(o,e)).next());});function K(){return {root:emotion.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"].gray300}`}),buttonContainer:emotion.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 v=a=>{var s=a,{onClose:o,title:e,testId:t="cf-ui-modal-header",className:n}=s,i=h(s,["onClose","title","testId","className"]);let d=K();return P__default["default"].createElement(f36Core.Flex,u(l({},i),{className:emotion.cx(d.root,n),testId:t,alignItems:"center",justifyContent:"space-between"}),P__default["default"].createElement(f36Typography.Subheading,{as:"h2",isTruncated:!0,marginBottom:"none"},e),o&&P__default["default"].createElement(f36Core.Flex,{alignItems:"center",className:d.buttonContainer},P__default["default"].createElement(f36Button.Button,{variant:"transparent","aria-label":"Close",startIcon:P__default["default"].createElement(f36Icons.CloseIcon,{size:"small"}),onClick:()=>{o();},size:"small"})))};v.displayName="ModalHeader";function U(){return {root:emotion.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 R=i=>{var a=i,{testId:o="cf-ui-modal-content",className:e,children:t}=a,n=h(a,["testId","className","children"]);let s=U();return P__default["default"].createElement(f36Core.Box,u(l({},n),{as:"div",className:emotion.cx(s.root,e),testId:o}),t)};R.displayName="ModalContent";function V(o){let e=emotion.cx(emotion.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?emotion.css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?emotion.css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.className);return {portal:emotion.css({display:"block"}),base:{root:emotion.cx(emotion.css({zIndex: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"?emotion.css({width:"100%",height:"100%"}):null),afterOpen:emotion.css({transform:"scale(1) !important"}),beforeClose:emotion.css({transform:o.size==="zen"?"scale(1)":"scale(0.85)"})},modalOverlay:{root:emotion.cx(emotion.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex: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.position==="center"?emotion.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:emotion.css({opacity:1}),beforeClose:emotion.css({opacity:0})},modal:e}}var Co={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw"};function yo(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=M=>{var S=M,{allowHeightOverflow:o=!1,position:e="center",shouldCloseOnEscapePress:t=!0,shouldCloseOnOverlayClick:n=!0,size:i="medium",testId:a="cf-ui-modal",topOffset:s="50px",aria:d}=S,r=h(S,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var I,L;let z=P__namespace.useRef(null),x=u(l({},r),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:n,size:i,testId:a,topOffset:s}),c=V({position:e,size:i,allowHeightOverflow:o,className:r.className,overlayClassName:(I=r.overlayProps)==null?void 0:I.className}),B=()=>{var O,N;let f=z.current;if(f){let T=document.activeElement;if(f!==T&&f.contains(T))return}let b=(O=x.initialFocusRef)==null?void 0:O.current;b?(N=b.focus)==null||N.call(b):f&&yo(f);},$=(...f)=>{x.onAfterOpen&&x.onAfterOpen(...f),B();},k=()=>P__namespace.createElement(P__namespace.Fragment,null,r.title&&P__namespace.createElement(v,l({title:r.title,onClose:x.onClose},r.modalHeaderProps)),P__namespace.createElement(R,l({},r.modalContentProps),r.children));return P__namespace.createElement(uo__default["default"],{ariaHideApp:!1,aria:d,onRequestClose:x.onClose,isOpen:r.isShown,onAfterOpen:$,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:n,shouldFocusAfterRender:!0,shouldReturnFocusAfterClose:!0,portalClassName:c.portal,style:{content:{top:e==="center"?0:s},overlay:(L=r.overlayProps)==null?void 0:L.style},className:{base:c.base.root,afterOpen:c.base.afterOpen,beforeClose:c.base.beforeClose},overlayClassName:{base:c.modalOverlay.root,afterOpen:c.modalOverlay.afterOpen,beforeClose:c.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:f=>{z.current=f;}},P__namespace.createElement(f36Core.Box,{testId:a,style:{width:Co[i]||i},className:c.modal,"data-modal-root":!0},typeof r.children=="function"?r.children(x):k()))};j.displayName="Modal";var A=i=>{var a=i,{testId:o="cf-ui-modal-controls",className:e,children:t}=a,n=h(a,["testId","className","children"]);return P__default["default"].createElement(f36Core.Flex,u(l({},n),{className:e,testId:o,flexDirection:"row",justifyContent:"flex-end",margin:"spacingL",marginTop:"none"}),P__default["default"].createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var g=j;g.Content=R;g.Header=v;g.Controls=A;var oo=({allowHeightOverflow:o=!1,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:n,confirmLabel:i="Confirm",confirmTestId:a="cf-ui-modal-confirm-confirm-button",intent:s="positive",isConfirmDisabled:d=!1,isConfirmLoading:r=!1,isShown:M,modalContentProps:S,modalControlsProps:z,modalHeaderProps:x,onCancel:c,onConfirm:B,shouldCloseOnEscapePress:$=!0,shouldCloseOnOverlayClick:k=!0,size:I="medium",testId:L="cf-ui-modal-confirm",title:f="Are you sure?",initialFocusRef:b})=>{let O=P__default["default"].useRef(null),N=i?P__default["default"].createElement(f36Button.Button,{testId:a,isDisabled:d,isLoading:r,variant:s,size:"small",onClick:()=>B()},i):null,T=e?P__default["default"].createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:c,size:"small",ref:b||O},e):null;return P__default["default"].createElement(g,{testId:L,isShown:M,onClose:c,size:I,shouldCloseOnOverlayClick:k,shouldCloseOnEscapePress:$,allowHeightOverflow:o,initialFocusRef:O},()=>P__default["default"].createElement(P__default["default"].Fragment,null,P__default["default"].createElement(g.Header,l({title:f||""},x)),P__default["default"].createElement(g.Content,l({},S),n),P__default["default"].createElement(g.Controls,l({},z),T,N)))};oo.displayName="ModalConfirm";var eo=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},D=new Map;function xo(){D.forEach((i,a)=>F(this,[i,a],function*({render:o,currentConfig:e,delay:t},n){let s=u(l({},e),{isShown:!1});o(s),yield new Promise(d=>setTimeout(d,t)),X__default["default"].unmountComponentAtNode(eo(n)),D.delete(n);}));}function ho(o,e={}){e=l({delay:300},e);let t=`modals-root${e.modalId||Date.now()}`,n=eo(t);return new Promise(i=>{let a={onClose:d,isShown:!0};function s({onClose:r,isShown:M}){X__default["default"].render(o({onClose:r,isShown:M}),n);}function d(r){return F(this,null,function*(){a=u(l({},a),{isShown:!1}),s(a),yield new Promise(M=>setTimeout(M,e.delay)),X__default["default"].unmountComponentAtNode(n),n.remove(),D.delete(t),i(r);})}s(a),D.set(t,{render:s,currentConfig:a,delay:e.delay});})}var bo={open:ho,closeAll:xo};
 
 exports.Modal = g;
 exports.ModalConfirm = oo;

package/dist/index.js.map

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

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@contentful/f36-modal",
-  "version": "4.36.0",
+  "version": "4.37.1",
   "description": "Forma 36: Modal component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-button": "^4.36.0",
-    "@contentful/f36-core": "^4.36.0",
+    "@contentful/f36-button": "^4.37.1",
+    "@contentful/f36-core": "^4.37.1",
     "@contentful/f36-icons": "^4.23.2",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-typography": "^4.36.0",
+    "@contentful/f36-typography": "^4.37.1",
     "@types/react-modal": "^3.13.1",
     "emotion": "^10.0.17",
     "react-modal": "^3.16.1"