@contentful/f36-modal 4.20.7 → 4.20.9

package/dist/esm/index.js

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

package/dist/index.d.ts

@@ -217,4 +217,4 @@ declare const ModalLauncher: {
     closeAll: typeof closeAll;
 };
 
-export { Modal, ModalConfirm, ModalConfirmProps, ModalContent, ModalContentProps, ModalControls, ModalControlsProps, ModalHeader, ModalHeaderProps, ModalLauncher, ModalProps };
+export { Modal, ModalConfirm, ModalConfirmProps, ModalContent, ModalContentProps, ModalControls, ModalControlsProps, ModalHeader, ModalHeaderProps, ModalLauncher, ModalLauncherComponentRendererProps, ModalLauncherOpenOptions, ModalProps };

package/dist/index.js

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

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

package/package.json

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

package/CHANGELOG.md

@@ -1,525 +0,0 @@
-# Change Log
-
-## 4.20.7
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.20.7
-  - @contentful/f36-icons@4.20.7
-  - @contentful/f36-typography@4.20.7
-  - @contentful/f36-core@4.20.7
-
-## 4.20.6
-
-### Patch Changes
-
-- Updated dependencies [[`05bdd10f`](https://github.com/contentful/forma-36/commit/05bdd10f5ea6fae41cacb0f4fd3db0bdd65422e9)]:
-  - @contentful/f36-icons@4.20.6
-  - @contentful/f36-button@4.20.6
-  - @contentful/f36-typography@4.20.6
-  - @contentful/f36-core@4.20.6
-
-## 4.20.5
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.20.5
-  - @contentful/f36-icons@4.20.5
-  - @contentful/f36-typography@4.20.5
-  - @contentful/f36-core@4.20.5
-
-## 4.20.4
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.20.4
-  - @contentful/f36-icons@4.20.4
-  - @contentful/f36-typography@4.20.4
-  - @contentful/f36-core@4.20.4
-
-## 4.20.3
-
-### Patch Changes
-
-- Updated dependencies [[`d3c27ab8`](https://github.com/contentful/forma-36/commit/d3c27ab830ec9c2cc096e8be33da496c2dc284ea)]:
-  - @contentful/f36-core@4.20.3
-  - @contentful/f36-button@4.20.3
-  - @contentful/f36-icons@4.20.3
-  - @contentful/f36-typography@4.20.3
-
-## 4.20.2
-
-### Patch Changes
-
-- [#2229](https://github.com/contentful/forma-36/pull/2229) [`6cc0c625`](https://github.com/contentful/forma-36/commit/6cc0c625e70a08d1f7f3e6bd3b0c4d0e32809af6) Thanks [@bgutsol](https://github.com/bgutsol)! - Expose some ModalLauncher types
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.20.2
-  - @contentful/f36-icons@4.20.2
-  - @contentful/f36-typography@4.20.2
-  - @contentful/f36-core@4.20.2
-
-## 4.20.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.20.1
-  - @contentful/f36-icons@4.20.1
-  - @contentful/f36-typography@4.20.1
-  - @contentful/f36-core@4.20.1
-
-## 4.20.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.20.0
-  - @contentful/f36-icons@4.20.0
-  - @contentful/f36-typography@4.20.0
-  - @contentful/f36-core@4.20.0
-
-## 4.19.2
-
-### Patch Changes
-
-- Updated dependencies [[`9647d295`](https://github.com/contentful/forma-36/commit/9647d295763c6518fe6d381d79a53524ac104d92)]:
-  - @contentful/f36-typography@4.19.2
-  - @contentful/f36-button@4.19.2
-  - @contentful/f36-icons@4.19.2
-  - @contentful/f36-core@4.19.2
-
-## 4.19.1
-
-### Patch Changes
-
-- [#2209](https://github.com/contentful/forma-36/pull/2209) [`42f0c321`](https://github.com/contentful/forma-36/commit/42f0c3218965137191842f492fe5dbf4bd10784c) Thanks [@denkristoffer](https://github.com/denkristoffer)! - build: build ESM to JS file - legacy output
-  fix(notification): use type imports
-- Updated dependencies [[`42f0c321`](https://github.com/contentful/forma-36/commit/42f0c3218965137191842f492fe5dbf4bd10784c)]:
-  - @contentful/f36-button@4.19.1
-  - @contentful/f36-icons@4.19.1
-  - @contentful/f36-typography@4.19.1
-  - @contentful/f36-core@4.19.1
-
-## 4.19.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.19.0
-  - @contentful/f36-icons@4.19.0
-  - @contentful/f36-typography@4.19.0
-  - @contentful/f36-core@4.19.0
-
-## 4.18.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.18.0
-  - @contentful/f36-icons@4.18.0
-  - @contentful/f36-typography@4.18.0
-  - @contentful/f36-core@4.18.0
-
-## 4.17.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.17.0
-  - @contentful/f36-icons@4.17.0
-  - @contentful/f36-typography@4.17.0
-  - @contentful/f36-core@4.17.0
-
-## 4.16.0
-
-### Minor Changes
-
-- [#2175](https://github.com/contentful/forma-36/pull/2175) [`438ccb1d`](https://github.com/contentful/forma-36/commit/438ccb1d28e7e7d309b050d1d5510fc15dd1ffa6) Thanks [@maxcheremisin](https://github.com/maxcheremisin)! - Add 'overlayProps' to Modal component
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.16.0
-  - @contentful/f36-icons@4.16.0
-  - @contentful/f36-typography@4.16.0
-  - @contentful/f36-core@4.16.0
-
-## 4.15.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.15.1
-  - @contentful/f36-icons@4.15.1
-  - @contentful/f36-typography@4.15.1
-  - @contentful/f36-core@4.15.1
-
-## 4.15.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.15.0
-  - @contentful/f36-icons@4.15.0
-  - @contentful/f36-typography@4.15.0
-  - @contentful/f36-core@4.15.0
-
-## 4.14.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.14.0
-  - @contentful/f36-icons@4.14.0
-  - @contentful/f36-typography@4.14.0
-  - @contentful/f36-core@4.14.0
-
-## 4.13.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.13.0
-  - @contentful/f36-icons@4.13.0
-  - @contentful/f36-typography@4.13.0
-  - @contentful/f36-core@4.13.0
-
-## 4.12.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.12.0
-  - @contentful/f36-icons@4.12.0
-  - @contentful/f36-typography@4.12.0
-  - @contentful/f36-core@4.12.0
-
-## 4.11.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.11.0
-  - @contentful/f36-icons@4.11.0
-  - @contentful/f36-typography@4.11.0
-  - @contentful/f36-core@4.11.0
-
-## 4.11.0-beta.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.11.0-beta.0
-  - @contentful/f36-icons@4.11.0-beta.0
-  - @contentful/f36-typography@4.11.0-beta.0
-  - @contentful/f36-core@4.11.0-beta.0
-
-## 4.10.5
-
-### Patch Changes
-
-- Updated dependencies [[`32cac8e8`](https://github.com/contentful/forma-36/commit/32cac8e8bdeedfe29b36bc6025eec11607c93da8)]:
-  - @contentful/f36-icons@4.10.5
-  - @contentful/f36-button@4.10.5
-  - @contentful/f36-typography@4.10.5
-  - @contentful/f36-core@4.10.5
-
-## 4.10.4
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.10.4
-  - @contentful/f36-icons@4.10.4
-  - @contentful/f36-typography@4.10.4
-  - @contentful/f36-core@4.10.4
-
-## 4.10.3
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.10.3
-  - @contentful/f36-icons@4.10.3
-  - @contentful/f36-typography@4.10.3
-  - @contentful/f36-core@4.10.3
-
-## 4.10.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.10.2
-  - @contentful/f36-icons@4.10.2
-  - @contentful/f36-typography@4.10.2
-  - @contentful/f36-core@4.10.2
-
-## 4.10.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.10.1
-  - @contentful/f36-icons@4.10.1
-  - @contentful/f36-typography@4.10.1
-  - @contentful/f36-core@4.10.1
-
-## 4.10.0
-
-### Patch Changes
-
-- Updated dependencies [[`20d73e7c`](https://github.com/contentful/forma-36/commit/20d73e7c8247ee789fdfde58882682808bf761ae)]:
-  - @contentful/f36-button@4.10.0
-  - @contentful/f36-icons@4.10.0
-  - @contentful/f36-typography@4.10.0
-  - @contentful/f36-core@4.10.0
-
-## 4.9.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.9.0
-  - @contentful/f36-icons@4.9.0
-  - @contentful/f36-typography@4.9.0
-  - @contentful/f36-core@4.9.0
-
-## 4.8.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.8.2
-  - @contentful/f36-icons@4.8.2
-  - @contentful/f36-typography@4.8.2
-  - @contentful/f36-core@4.8.2
-
-## 4.8.1
-
-### Patch Changes
-
-- Updated dependencies [[`7afca5e6`](https://github.com/contentful/forma-36/commit/7afca5e6f9d89b1f187fc48ab8e8fd39366f110b)]:
-  - @contentful/f36-typography@4.8.1
-  - @contentful/f36-button@4.8.1
-  - @contentful/f36-icons@4.8.1
-  - @contentful/f36-core@4.8.1
-
-## 4.8.0
-
-### Patch Changes
-
-- [#2008](https://github.com/contentful/forma-36/pull/2008) [`1a941fd9`](https://github.com/contentful/forma-36/commit/1a941fd99757e49bb30e0e32eab19bc680f66597) Thanks [@massao](https://github.com/massao)! - Fix issue with types being generated wrongly
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.8.0
-  - @contentful/f36-icons@4.8.0
-  - @contentful/f36-typography@4.8.0
-  - @contentful/f36-core@4.8.0
-
-## 4.7.0
-
-### Patch Changes
-
-- Updated dependencies [[`e50b8945`](https://github.com/contentful/forma-36/commit/e50b8945faef7323187e1bd9a2a9cbfcbae2e405)]:
-  - @contentful/f36-core@4.7.0
-  - @contentful/f36-button@4.7.0
-  - @contentful/f36-icons@4.7.0
-  - @contentful/f36-typography@4.7.0
-
-## 4.6.2
-
-### Patch Changes
-
-- [#1994](https://github.com/contentful/forma-36/pull/1994) [`0364ffe2`](https://github.com/contentful/forma-36/commit/0364ffe2aa2e5ccfea6263f4173b2d8069e4ec05) Thanks [@denkristoffer](https://github.com/denkristoffer)! - fix(modal): fix scaling issues for modals with size "zen"
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.6.2
-  - @contentful/f36-icons@4.6.2
-  - @contentful/f36-typography@4.6.2
-  - @contentful/f36-core@4.6.2
-
-## 4.6.1
-
-### Patch Changes
-
-- [#1995](https://github.com/contentful/forma-36/pull/1995) [`f4495eda`](https://github.com/contentful/forma-36/commit/f4495edaf02d87e78acbc454730190161f6a305d) Thanks [@anho](https://github.com/anho)! - force scale for modal
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.6.1
-  - @contentful/f36-icons@4.6.1
-  - @contentful/f36-typography@4.6.1
-  - @contentful/f36-core@4.6.1
-
-## 4.6.0
-
-### Minor Changes
-
-- [`6fd4099e`](https://github.com/contentful/forma-36/commit/6fd4099e3c4f364f6b95cb3720cca995c355e5cc) Thanks [@denkristoffer](https://github.com/denkristoffer)! - fix(modal): custom classname before modal root styles
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.6.0
-  - @contentful/f36-icons@4.6.0
-  - @contentful/f36-typography@4.6.0
-  - @contentful/f36-core@4.6.0
-
-## 4.5.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.5.0
-  - @contentful/f36-icons@4.5.0
-  - @contentful/f36-typography@4.5.0
-  - @contentful/f36-core@4.5.0
-
-## 4.4.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.4.1
-  - @contentful/f36-icons@4.4.1
-  - @contentful/f36-typography@4.4.1
-  - @contentful/f36-core@4.4.1
-
-## 4.4.0
-
-### Patch Changes
-
-- Updated dependencies [[`a9459709`](https://github.com/contentful/forma-36/commit/a945970959bc7e9478bec822bb775a513c6aa0fe)]:
-  - @contentful/f36-core@4.4.0
-  - @contentful/f36-button@4.4.0
-  - @contentful/f36-icons@4.4.0
-  - @contentful/f36-typography@4.4.0
-
-## 4.3.11
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.3.11
-  - @contentful/f36-icons@4.3.11
-  - @contentful/f36-typography@4.3.11
-  - @contentful/f36-core@4.3.11
-
-## 4.3.10
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @contentful/f36-button@4.3.10
-  - @contentful/f36-icons@4.3.10
-  - @contentful/f36-typography@4.3.10
-  - @contentful/f36-core@4.3.10
-
-## 4.3.9
-
-### Patch Changes
-
-- [#1953](https://github.com/contentful/forma-36/pull/1953) [`df985087`](https://github.com/contentful/forma-36/commit/df98508780f63754e29df09d4f6239bdc84982a8) Thanks [@massao](https://github.com/massao)! - bump packages versions to have consistent versioning
-
-- Updated dependencies [[`df985087`](https://github.com/contentful/forma-36/commit/df98508780f63754e29df09d4f6239bdc84982a8)]:
-  - @contentful/f36-button@4.3.9
-  - @contentful/f36-icons@4.3.9
-  - @contentful/f36-typography@4.3.9
-  - @contentful/f36-core@4.3.9
-
-## [4.2.10](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.9...@contentful/f36-modal@4.2.10) (2022-03-14)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.2.9](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.8...@contentful/f36-modal@4.2.9) (2022-03-10)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.2.8](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.7...@contentful/f36-modal@4.2.8) (2022-03-09)
-
-### Bug Fixes
-
-- flickering in modal close animation ([#1940](https://github.com/contentful/forma-36/issues/1940)) ([1ba910e](https://github.com/contentful/forma-36/commit/1ba910e6206991c7596ca75620c3da00aee3e0d4))
-
-## [4.2.7](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.6...@contentful/f36-modal@4.2.7) (2022-03-09)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.2.6](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.5...@contentful/f36-modal@4.2.6) (2022-03-03)
-
-### Bug Fixes
-
-- migrate links from master to main ([#1923](https://github.com/contentful/forma-36/issues/1923)) ([607301d](https://github.com/contentful/forma-36/commit/607301d57a2e83190d2aa298120ddb8493e8c429))
-
-## [4.2.5](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.4...@contentful/f36-modal@4.2.5) (2022-03-02)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.2.4](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.3...@contentful/f36-modal@4.2.4) (2022-02-22)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.2.3](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.2...@contentful/f36-modal@4.2.3) (2022-02-22)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.2.2](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.1...@contentful/f36-modal@4.2.2) (2022-02-17)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.2.1](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.2.0...@contentful/f36-modal@4.2.1) (2022-02-09)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-# [4.2.0](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.8...@contentful/f36-modal@4.2.0) (2022-02-07)
-
-### Features
-
-- implement short description in page content header ([#1822](https://github.com/contentful/forma-36/issues/1822)) ([c812815](https://github.com/contentful/forma-36/commit/c812815cf6681a021fd5313fc905227def842ee8))
-
-## [4.1.8](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.7...@contentful/f36-modal@4.1.8) (2022-02-07)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.1.7](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.6...@contentful/f36-modal@4.1.7) (2022-02-07)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.1.6](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.5...@contentful/f36-modal@4.1.6) (2022-02-02)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.1.5](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.4...@contentful/f36-modal@4.1.5) (2022-01-31)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.1.4](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.3...@contentful/f36-modal@4.1.4) (2022-01-31)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.1.3](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.2...@contentful/f36-modal@4.1.3) (2022-01-27)
-
-### Bug Fixes
-
-- fix Modal defaults, adjust docs ([#1827](https://github.com/contentful/forma-36/issues/1827)) ([7a262f0](https://github.com/contentful/forma-36/commit/7a262f0719492fba16e0557e7fc3316eeacd2a21))
-
-## [4.1.2](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.1...@contentful/f36-modal@4.1.2) (2022-01-26)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-## [4.1.1](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.1.0...@contentful/f36-modal@4.1.1) (2022-01-19)
-
-**Note:** Version bump only for package @contentful/f36-modal
-
-# [4.1.0](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.0.1...@contentful/f36-modal@4.1.0) (2022-01-13)
-
-### Features
-
-- implement props list redesign [BAU-535](<[#1756](https://github.com/contentful/forma-36/issues/1756)>) ([21c57e7](https://github.com/contentful/forma-36/commit/21c57e72008b75990d03af4e7500edc1c7f3d26d))
-
-## [4.0.1](https://github.com/contentful/forma-36/compare/@contentful/f36-modal@4.0.0...@contentful/f36-modal@4.0.1) (2022-01-11)
-
-**Note:** Version bump only for package @contentful/f36-modal