@contentful/f36-modal 6.0.0-alpha.2 → 6.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as P from'react';import P__default from'react';import Mo from'react-modal';import {Flex,Box}from'@contentful/f36-core';import {cx,css}from'@emotion/css';import {XIcon}from'@contentful/f36-icons';import {IconButton,ButtonGroup,Button}from'@contentful/f36-button';import {Subheading,Text}from'@contentful/f36-typography';import m from'@contentful/f36-tokens';import
|
|
1
|
+
import*as P from'react';import P__default from'react';import Mo from'react-modal';import {Flex,Box}from'@contentful/f36-core';import {cx,css}from'@emotion/css';import {XIcon}from'@contentful/f36-icons';import {IconButton,ButtonGroup,Button}from'@contentful/f36-button';import {Subheading,Text}from'@contentful/f36-typography';import m from'@contentful/f36-tokens';import Ro from'react-dom/client';var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:true,configurable:true,writable:true,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if($)for(var t of $(e))Y.call(e,t)&&q(o,t,e[t]);return o},f=(o,e)=>no(o,ro(e));var b=(o,e)=>{var t={};for(var r in o)G.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&$)for(var r of $(o))e.indexOf(r)<0&&Y.call(o,r)&&(t[r]=o[r]);return t};var D=(o,e,t)=>new Promise((r,a)=>{var s=n=>{try{d(t.next(n));}catch(c){a(c);}},l=n=>{try{d(t.throw(n));}catch(c){a(c);}},d=n=>n.done?r(n.value):Promise.resolve(n.value).then(s,l);d((t=t.apply(o,e)).next());});function K(){return {root:css({position:"relative",padding:`${m.spacingM} ${m.spacingM} ${m.spacingM} ${m.spacingL}`,borderRadius:`${m.borderRadiusMedium} ${m.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${m.gray200}`}),buttonContainer:css({position:"relative",width:m.spacing2Xl,height:m.spacingL,button:{position:"absolute",top:`calc(-1 * ${m.spacing2Xs})`,right:0}})}}var w=n=>{var c=n,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:a,children:s,aria:l={closeIconLabel:"Close"}}=c,d=b(c,["onClose","title","subtitle","testId","className","children","aria"]);let M=K();return P__default.createElement(Flex,f(i({},d),{className:cx(M.root,a),testId:r,alignItems:"center",justifyContent:"space-between"}),P__default.createElement(Subheading,{as:"h2",isTruncated:true,marginBottom:"none"},e,t&&P__default.createElement(Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),s,o&&P__default.createElement(Flex,{alignItems:"center",className:M.buttonContainer},P__default.createElement(IconButton,{variant:"transparent","aria-label":l.closeIconLabel,size:"small",icon:P__default.createElement(XIcon,{size:"small"}),onClick:o})))};w.displayName="ModalHeader";function U(){return {root:css({padding:`${m.spacingM} ${m.spacingL}`,color:m.gray700,fontSize:m.fontSizeM,fontFamily:m.fontStackPrimary,lineHeight:m.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var O=a=>{var s=a,{testId:o="cf-ui-modal-content",className:e,children:t}=s,r=b(s,["testId","className","children"]);let l=U();return P__default.createElement(Box,f(i({},r),{as:"div",className:cx(l.root,e),testId:o}),t)};O.displayName="ModalContent";function V(o){let e=cx(css({backgroundColor:m.colorWhite,borderRadius:o.size==="zen"?0:m.borderRadiusMedium,boxShadow:m.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${m.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${m.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"}),o.allowHeightOverflow?css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?css({maxWidth:`calc(100vw - ${m.spacingXl})`,maxHeight:`calc(100vh - ${m.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:css({display:"block"}),base:{root:cx(css({zIndex:m.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none",transform:o.size==="zen"?"scale(1)":"scale(0.85)",transition:`transform ${m.transitionDurationDefault} ${m.transitionEasingDefault}`}),o.size==="zen"?css({width:"100%",height:"100%"}):null),afterOpen:css({transform:"scale(1) !important"}),beforeClose:css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:cx(css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:m.zIndexModal,opacity:0,transition:`opacity ${m.transitionDurationDefault} ${m.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center",padding:m.spacing2Xl}),o.size==="fullscreen"?css({padding:0}):null,o.position==="center"?css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css({opacity:"1 !important"}),beforeClose:css({opacity:"0 !important"})},modal:e}}var yo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function go(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=c=>{var M=c,{allowHeightOverflow:o=false,position:e="center",shouldCloseOnEscapePress:t=true,shouldCloseOnOverlayClick:r=true,size:a="medium",testId:s="cf-ui-modal",topOffset:l="50px",aria:d}=M,n=b(M,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var z,I;let T=P.useRef(null),h=f(i({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:a,testId:s,topOffset:l}),u=V({position:e,size:a,allowHeightOverflow:o,className:n.className,overlayClassName:(z=n.overlayProps)==null?void 0:z.className}),B=()=>{var L,N;let C=T.current;if(C){let E=document.activeElement;if(C!==E&&C.contains(E))return}let R=(L=h.initialFocusRef)==null?void 0:L.current;R?(N=R.focus)==null||N.call(R):C&&go(C);},F=(...C)=>{h.onAfterOpen&&h.onAfterOpen(...C),B();},W=()=>P.createElement(P.Fragment,null,n.title&&P.createElement(w,i({title:n.title,subtitle:n.subtitle,onClose:h.onClose},n.modalHeaderProps)),P.createElement(O,i({},n.modalContentProps),typeof n.children=="function"?null:n.children));return P.createElement(Mo,{ariaHideApp:false,aria:d,onRequestClose:h.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:true,shouldReturnFocusAfterClose:true,portalClassName:u.portal,style:{content:{top:e==="center"?0:l},overlay:(I=n.overlayProps)==null?void 0:I.style},className:{base:u.base.root,afterOpen:u.base.afterOpen,beforeClose:u.base.beforeClose},overlayClassName:{base:u.modalOverlay.root,afterOpen:u.modalOverlay.afterOpen,beforeClose:u.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:C=>{T.current=C;}},P.createElement(Box,{testId:s,style:{width:yo[a]||a},className:u.modal,"data-modal-root":true},typeof n.children=="function"?n.children(h):W()))};j.displayName="Modal";function Z(){return {root:css({borderBottomLeftRadius:m.borderRadiusMedium,borderBottomRightRadius:m.borderRadiusMedium,padding:`${m.spacingS} ${m.spacingM}`,width:"100%",boxSizing:"border-box"})}}var A=a=>{var s=a,{testId:o="cf-ui-modal-controls",className:e,children:t}=s,r=b(s,["testId","className","children"]);let l=Z();return P__default.createElement(Flex,f(i({},r),{className:cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),P__default.createElement(ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var x=j;x.Content=O;x.Header=w;x.Controls=A;var eo=({allowHeightOverflow:o=false,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:a="Confirm",confirmTestId:s="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:d=false,isConfirmLoading:n=false,isShown:c,modalContentProps:M,modalControlsProps:T,modalHeaderProps:h,onCancel:u,onConfirm:B,shouldCloseOnEscapePress:F=true,shouldCloseOnOverlayClick:W=true,size:z="medium",testId:I="cf-ui-modal-confirm",title:C="Are you sure?",initialFocusRef:R})=>{let L=P__default.useRef(null),N=a?P__default.createElement(Button,{testId:s,isDisabled:d,isLoading:n,variant:l,size:"small",onClick:()=>B()},a):null,E=e?P__default.createElement(Button,{testId:t,variant:"secondary",onClick:u,size:"small",ref:R||L},e):null;return P__default.createElement(x,{testId:I,isShown:c,onClose:u,size:z,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:L},()=>P__default.createElement(P__default.Fragment,null,P__default.createElement(x.Header,f(i({title:C||""},h),{onClose:u})),P__default.createElement(x.Content,i({},M),r),P__default.createElement(x.Controls,i({},T),E,N)))};eo.displayName="ModalConfirm";var vo=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},S=new Map;function wo(){return D(this,null,function*(){let o=Array.from(S.entries());yield Promise.all(o.map(l=>D(null,[l],function*([e,{root:t,render:r,currentConfig:a,delay:s}]){try{let d=f(i({},a),{isShown:!1});r(d),yield new Promise(n=>setTimeout(n,s)),t.unmount();}finally{if(S.has(e)){let d=document.getElementById(e);d&&d.remove(),S.delete(e);}}})));})}function Ho(o,e={}){e=i({delay:300},e);let t=`modals-root-${e.modalId||""}-${Date.now()}-${Math.random()}`,r=vo(t),a=Ro.createRoot(r);return new Promise(s=>{let l;function d(c){return D(this,null,function*(){l=f(i({},l),{isShown:false}),n(l),yield new Promise(M=>setTimeout(M,e.delay)),a.unmount(),r.remove(),S.delete(t),s(c);})}function n({onClose:c,isShown:M}){a.render(o({onClose:c,isShown:M}));}l={onClose:d,isShown:true},n(l),S.set(t,{root:a,render:n,currentConfig:l,delay:e.delay});})}var Oo={open:Ho,closeAll:wo};export{x as Modal,eo as ModalConfirm,O as ModalContent,A as ModalControls,w as ModalHeader,Oo as ModalLauncher};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ModalHeader/ModalHeader.styles.ts","../../src/ModalHeader/ModalHeader.tsx","../../src/ModalContent/ModalContent.styles.ts","../../src/ModalContent/ModalContent.tsx","../../src/Modal.styles.ts","../../src/Modal.tsx","../../src/ModalControls/ModalControls.styles.tsx","../../src/ModalControls/ModalControls.tsx","../../src/CompoundModal.tsx","../../src/ModalConfirm/ModalConfirm.tsx","../../src/ModalLauncher/ModalLauncher.tsx"],"names":["getModalHeaderStyles","css","tokens","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","React","Flex","__spreadProps","__spreadValues","cx","Subheading","Text","IconButton","XIcon","getModalContentStyles","ModalContent","Box","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","g","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ReactModal","ref","getModalControlStyles","ModalControls","ButtonGroup","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","Button","cancelButton","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","modals","_0","root","render","currentConfig","delay","config","resolveDelay","el","open","componentRenderer","options","ReactDOM","resolve","result","ModalLauncher"],"mappings":"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","file":"index.js","sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 * ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from '@emotion/css';\nimport { XIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { Text, Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n subtitle?: string;\n onClose?: (event?: React.MouseEvent | React.KeyboardEvent) => void;\n children?: React.ReactNode;\n aria?: {\n closeIconLabel?: string;\n };\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n subtitle,\n testId = 'cf-ui-modal-header',\n className,\n children,\n aria = {\n closeIconLabel: 'Close',\n },\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n {subtitle && (\n <Text marginLeft=\"spacingXs\" fontColor=\"gray700\">\n {subtitle}\n </Text>\n )}\n </Subheading>\n {children}\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <IconButton\n variant=\"transparent\"\n aria-label={aria.closeIconLabel}\n size=\"small\"\n icon={<XIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\nimport { cx } from '@emotion/css';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.size === 'fullscreen'\n ? css({\n maxWidth: `calc(100vw - ${tokens.spacingXl})`,\n maxHeight: `calc(100vh - ${tokens.spacingXl})`,\n margin: 0,\n height: '100vh',\n width: '100vw',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85) !important',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n padding: tokens.spacing2Xl,\n }),\n props.size === 'fullscreen'\n ? css({\n padding: 0,\n })\n : null,\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: '1 !important',\n }),\n beforeClose: css({\n opacity: '0 !important',\n }),\n },\n modal,\n };\n}\n","import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n fullscreen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n\n /**\n * Function that will be run when the modal is requested to be closed, prior to actually closing.\n */\n onClose: ReactModal.Props['onRequestClose'];\n\n /**\n * Function that will be run after the modal has opened.\n */\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /**\n * Additional aria attributes\n */\n aria?: ReactModal.Props['aria'];\n\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * Indicating if modal is centered or linked to the top\n * @default center\n */\n position?: ModalPositionType;\n /**\n * Top offset if position is 'top'\n * @default 50px\n */\n topOffset?: number | string;\n /**\n * Modal title that is used in header\n */\n title?: string;\n /**\n * Modal subtitle that is used in header\n */\n subtitle?: string;\n /**\n * Size of the modal window\n * @default medium\n */\n size?: ModalSizeType | string | number;\n /**\n * Are modals higher than viewport allowed\n * @default false\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override overlay behaviour\n */\n overlayProps?: Pick<CommonProps, 'className' | 'style'>;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode | RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n const onInitialFocus = () => {\n const contentEl = contentRef.current;\n if (contentEl) {\n const activeEl = document.activeElement;\n const isContentContainsActive =\n contentEl !== activeEl && contentEl.contains(activeEl);\n\n if (isContentContainsActive) {\n return;\n }\n }\n\n const initialFocusEl = props.initialFocusRef?.current;\n if (initialFocusEl) {\n initialFocusEl.focus?.();\n } else if (contentEl) {\n focusFirstWithinNode(contentEl);\n }\n };\n\n const onAfterOpen: ModalProps['onAfterOpen'] = (...args) => {\n if (props.onAfterOpen) {\n props.onAfterOpen(...args);\n }\n onInitialFocus();\n };\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n subtitle={otherProps.subtitle}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {typeof otherProps.children === 'function'\n ? null\n : otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] || size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalControlStyles() {\n return {\n root: css({\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n width: `100%`,\n // This is required in places where it is not set globally (e.g. dialogs via the app framework)\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\nimport { getModalControlStyles } from './ModalControls.styles';\nimport { cx } from '@emotion/css';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] | React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n const styles = getModalControlStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n /**\n * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n */\n onConfirm(): void;\n /**\n * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n */\n onCancel: ModalProps['onClose'];\n /**\n Modal title that is used in header\n */\n title?: string;\n /**\n * Label of the confirm button\n */\n confirmLabel?: string | false;\n /**\n * Label of the cancel button\n */\n cancelLabel?: string | false;\n /**\n * The intent of the ModalConfirm. Used for the Button.\n */\n intent?: 'primary' | 'positive' | 'negative';\n /**\n * Size of the modal window\n */\n size?: ModalProps['size'];\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * When true, the confirm button is set to disabled.\n */\n isConfirmDisabled?: boolean;\n /**\n * When true, the confirm button is set to loading.\n */\n isConfirmLoading?: boolean;\n /**\n * Are modals higher than viewport allowed\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional props to override ModalControl behaviour\n */\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /**\n * Optional property to set initial focus\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef || cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header\n title={title || ''}\n {...modalHeaderProps}\n onClose={onCancel}\n />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/* global Promise */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nexport interface ModalLauncherComponentRendererProps<T = unknown> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /**\n * Unique id to be used as identifier for the modal contianer\n */\n modalId?: string;\n /**\n * ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData<T = unknown> {\n root: ReactDOM.Root;\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<T>) => void;\n currentConfig: ModalLauncherComponentRendererProps<T>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nasync function closeAll(): Promise<void> {\n const modals = Array.from(openModalsIds.entries());\n await Promise.all(\n modals.map(async ([rootElId, { root, render, currentConfig, delay }]) => {\n try {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n root.unmount();\n } finally {\n // Only clean up if this entry still exists (avoid race with individual onClose)\n if (openModalsIds.has(rootElId)) {\n const el = document.getElementById(rootElId);\n if (el) el.remove();\n openModalsIds.delete(rootElId);\n }\n }\n }),\n );\n}\n\nfunction open<T = unknown>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => React.ReactElement,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Generate a unique ID for each modal instance to avoid root reuse conflicts\n const rootElId = `modals-root-${options.modalId || ''}-${Date.now()}-${Math.random()}`;\n const rootDom = getRoot(rootElId);\n const root = ReactDOM.createRoot(rootDom);\n return new Promise((resolve) => {\n let currentConfig: ModalLauncherComponentRendererProps<T>;\n\n async function onClose(result?: T) {\n currentConfig = { ...currentConfig, isShown: false };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n root.unmount();\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(result);\n }\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n root.render(componentRenderer({ onClose, isShown }));\n }\n\n currentConfig = { onClose, isShown: true };\n render(currentConfig);\n\n openModalsIds.set(rootElId, {\n root,\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ModalHeader/ModalHeader.styles.ts","../../src/ModalHeader/ModalHeader.tsx","../../src/ModalContent/ModalContent.styles.ts","../../src/ModalContent/ModalContent.tsx","../../src/Modal.styles.ts","../../src/Modal.tsx","../../src/ModalControls/ModalControls.styles.tsx","../../src/ModalControls/ModalControls.tsx","../../src/CompoundModal.tsx","../../src/ModalConfirm/ModalConfirm.tsx","../../src/ModalLauncher/ModalLauncher.tsx"],"names":["getModalHeaderStyles","css","tokens","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","React","Flex","__spreadProps","__spreadValues","cx","Subheading","Text","IconButton","XIcon","getModalContentStyles","ModalContent","Box","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","g","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ReactModal","ref","getModalControlStyles","ModalControls","ButtonGroup","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","Button","cancelButton","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","modals","_0","root","render","currentConfig","delay","config","resolveDelay","el","open","componentRenderer","options","ReactDOM","resolve","result","ModalLauncher"],"mappings":"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","file":"index.js","sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 * ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport ReactModal from 'react-modal';\nimport { cx } from '@emotion/css';\nimport { XIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { Text, Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n subtitle?: string;\n onClose?: ReactModal.Props['onRequestClose'];\n children?: React.ReactNode;\n aria?: {\n closeIconLabel?: string;\n };\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n subtitle,\n testId = 'cf-ui-modal-header',\n className,\n children,\n aria = {\n closeIconLabel: 'Close',\n },\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n {subtitle && (\n <Text marginLeft=\"spacingXs\" fontColor=\"gray700\">\n {subtitle}\n </Text>\n )}\n </Subheading>\n {children}\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <IconButton\n variant=\"transparent\"\n aria-label={aria.closeIconLabel}\n size=\"small\"\n icon={<XIcon size=\"small\" />}\n onClick={onClose}\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\nimport { cx } from '@emotion/css';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.size === 'fullscreen'\n ? css({\n maxWidth: `calc(100vw - ${tokens.spacingXl})`,\n maxHeight: `calc(100vh - ${tokens.spacingXl})`,\n margin: 0,\n height: '100vh',\n width: '100vw',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85) !important',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n padding: tokens.spacing2Xl,\n }),\n props.size === 'fullscreen'\n ? css({\n padding: 0,\n })\n : null,\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: '1 !important',\n }),\n beforeClose: css({\n opacity: '0 !important',\n }),\n },\n modal,\n };\n}\n","import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n fullscreen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n\n /**\n * Function that will be run when the modal is requested to be closed, prior to actually closing.\n */\n onClose: ReactModal.Props['onRequestClose'];\n\n /**\n * Function that will be run after the modal has opened.\n */\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /**\n * Additional aria attributes\n */\n aria?: ReactModal.Props['aria'];\n\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * Indicating if modal is centered or linked to the top\n * @default center\n */\n position?: ModalPositionType;\n /**\n * Top offset if position is 'top'\n * @default 50px\n */\n topOffset?: number | string;\n /**\n * Modal title that is used in header\n */\n title?: string;\n /**\n * Modal subtitle that is used in header\n */\n subtitle?: string;\n /**\n * Size of the modal window\n * @default medium\n */\n size?: ModalSizeType | string | number;\n /**\n * Are modals higher than viewport allowed\n * @default false\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override overlay behaviour\n */\n overlayProps?: Pick<CommonProps, 'className' | 'style'>;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode | RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n const onInitialFocus = () => {\n const contentEl = contentRef.current;\n if (contentEl) {\n const activeEl = document.activeElement;\n const isContentContainsActive =\n contentEl !== activeEl && contentEl.contains(activeEl);\n\n if (isContentContainsActive) {\n return;\n }\n }\n\n const initialFocusEl = props.initialFocusRef?.current;\n if (initialFocusEl) {\n initialFocusEl.focus?.();\n } else if (contentEl) {\n focusFirstWithinNode(contentEl);\n }\n };\n\n const onAfterOpen: ModalProps['onAfterOpen'] = (...args) => {\n if (props.onAfterOpen) {\n props.onAfterOpen(...args);\n }\n onInitialFocus();\n };\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n subtitle={otherProps.subtitle}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {typeof otherProps.children === 'function'\n ? null\n : otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] || size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalControlStyles() {\n return {\n root: css({\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n width: `100%`,\n // This is required in places where it is not set globally (e.g. dialogs via the app framework)\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\nimport { getModalControlStyles } from './ModalControls.styles';\nimport { cx } from '@emotion/css';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] | React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n const styles = getModalControlStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n /**\n * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n */\n onConfirm(): void;\n /**\n * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n */\n onCancel: ModalProps['onClose'];\n /**\n Modal title that is used in header\n */\n title?: string;\n /**\n * Label of the confirm button\n */\n confirmLabel?: string | false;\n /**\n * Label of the cancel button\n */\n cancelLabel?: string | false;\n /**\n * The intent of the ModalConfirm. Used for the Button.\n */\n intent?: 'primary' | 'positive' | 'negative';\n /**\n * Size of the modal window\n */\n size?: ModalProps['size'];\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * When true, the confirm button is set to disabled.\n */\n isConfirmDisabled?: boolean;\n /**\n * When true, the confirm button is set to loading.\n */\n isConfirmLoading?: boolean;\n /**\n * Are modals higher than viewport allowed\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional props to override ModalControl behaviour\n */\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /**\n * Optional property to set initial focus\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef || cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header\n title={title || ''}\n {...modalHeaderProps}\n onClose={onCancel}\n />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/* global Promise */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nexport interface ModalLauncherComponentRendererProps<T = unknown> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /**\n * Unique id to be used as identifier for the modal contianer\n */\n modalId?: string;\n /**\n * ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData<T = unknown> {\n root: ReactDOM.Root;\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<T>) => void;\n currentConfig: ModalLauncherComponentRendererProps<T>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nasync function closeAll(): Promise<void> {\n const modals = Array.from(openModalsIds.entries());\n await Promise.all(\n modals.map(async ([rootElId, { root, render, currentConfig, delay }]) => {\n try {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n root.unmount();\n } finally {\n // Only clean up if this entry still exists (avoid race with individual onClose)\n if (openModalsIds.has(rootElId)) {\n const el = document.getElementById(rootElId);\n if (el) el.remove();\n openModalsIds.delete(rootElId);\n }\n }\n }),\n );\n}\n\nfunction open<T = unknown>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => React.ReactElement,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Generate a unique ID for each modal instance to avoid root reuse conflicts\n const rootElId = `modals-root-${options.modalId || ''}-${Date.now()}-${Math.random()}`;\n const rootDom = getRoot(rootElId);\n const root = ReactDOM.createRoot(rootDom);\n return new Promise((resolve) => {\n let currentConfig: ModalLauncherComponentRendererProps<T>;\n\n async function onClose(result?: T) {\n currentConfig = { ...currentConfig, isShown: false };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n root.unmount();\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(result);\n }\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n root.render(componentRenderer({ onClose, isShown }));\n }\n\n currentConfig = { onClose, isShown: true };\n render(currentConfig);\n\n openModalsIds.set(rootElId, {\n root,\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -6,7 +6,7 @@ import { PropsWithHTMLElement, CommonProps, ExpandProps } from '@contentful/f36-
|
|
|
6
6
|
interface ModalHeaderInternalProps extends CommonProps {
|
|
7
7
|
title: string;
|
|
8
8
|
subtitle?: string;
|
|
9
|
-
onClose?:
|
|
9
|
+
onClose?: ReactModal.Props['onRequestClose'];
|
|
10
10
|
children?: React__default.ReactNode;
|
|
11
11
|
aria?: {
|
|
12
12
|
closeIconLabel?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { PropsWithHTMLElement, CommonProps, ExpandProps } from '@contentful/f36-
|
|
|
6
6
|
interface ModalHeaderInternalProps extends CommonProps {
|
|
7
7
|
title: string;
|
|
8
8
|
subtitle?: string;
|
|
9
|
-
onClose?:
|
|
9
|
+
onClose?: ReactModal.Props['onRequestClose'];
|
|
10
10
|
children?: React__default.ReactNode;
|
|
11
11
|
aria?: {
|
|
12
12
|
closeIconLabel?: string;
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var P=require('react'),Mo=require('react-modal'),f36Core=require('@contentful/f36-core'),css=require('@emotion/css'),f36Icons=require('@contentful/f36-icons'),f36Button=require('@contentful/f36-button'),f36Typography=require('@contentful/f36-typography'),m=require('@contentful/f36-tokens'),vo=require('react-dom/client');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var P__namespace=/*#__PURE__*/_interopNamespace(P);var Mo__default=/*#__PURE__*/_interopDefault(Mo);var m__default=/*#__PURE__*/_interopDefault(m);var vo__default=/*#__PURE__*/_interopDefault(vo);var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:true,configurable:true,writable:true,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if($)for(var t of $(e))Y.call(e,t)&&q(o,t,e[t]);return o},f=(o,e)=>no(o,ro(e));var b=(o,e)=>{var t={};for(var r in o)G.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&$)for(var r of $(o))e.indexOf(r)<0&&Y.call(o,r)&&(t[r]=o[r]);return t};var D=(o,e,t)=>new Promise((r,a)=>{var s=n=>{try{d(t.next(n));}catch(c){a(c);}},l=n=>{try{d(t.throw(n));}catch(c){a(c);}},d=n=>n.done?r(n.value):Promise.resolve(n.value).then(s,l);d((t=t.apply(o,e)).next());});function J(){return {root:css.css({position:"relative",padding:`${m__default.default.spacingM} ${m__default.default.spacingM} ${m__default.default.spacingM} ${m__default.default.spacingL}`,borderRadius:`${m__default.default.borderRadiusMedium} ${m__default.default.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${m__default.default.gray200}`}),buttonContainer:css.css({position:"relative",width:m__default.default.spacing2Xl,height:m__default.default.spacingL,button:{position:"absolute",top:`calc(-1 * ${m__default.default.spacing2Xs})`,right:0}})}}var w=n=>{var c=n,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:a,children:s,aria:l={closeIconLabel:"Close"}}=c,d=b(c,["onClose","title","subtitle","testId","className","children","aria"]);let M=J();return P__namespace.default.createElement(f36Core.Flex,f(i({},d),{className:css.cx(M.root,a),testId:r,alignItems:"center",justifyContent:"space-between"}),P__namespace.default.createElement(f36Typography.Subheading,{as:"h2",isTruncated:true,marginBottom:"none"},e,t&&P__namespace.default.createElement(f36Typography.Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),s,o&&P__namespace.default.createElement(f36Core.Flex,{alignItems:"center",className:M.buttonContainer},P__namespace.default.createElement(f36Button.IconButton,{variant:"transparent","aria-label":l.closeIconLabel,size:"small",icon:P__namespace.default.createElement(f36Icons.XIcon,{size:"small"}),onClick:()=>{o();}})))};w.displayName="ModalHeader";function U(){return {root:css.css({padding:`${m__default.default.spacingM} ${m__default.default.spacingL}`,color:m__default.default.gray700,fontSize:m__default.default.fontSizeM,fontFamily:m__default.default.fontStackPrimary,lineHeight:m__default.default.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var O=a=>{var s=a,{testId:o="cf-ui-modal-content",className:e,children:t}=s,r=b(s,["testId","className","children"]);let l=U();return P__namespace.default.createElement(f36Core.Box,f(i({},r),{as:"div",className:css.cx(l.root,e),testId:o}),t)};O.displayName="ModalContent";function V(o){let e=css.cx(css.css({backgroundColor:m__default.default.colorWhite,borderRadius:o.size==="zen"?0:m__default.default.borderRadiusMedium,boxShadow:m__default.default.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${m__default.default.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${m__default.default.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"}),o.allowHeightOverflow?css.css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?css.css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?css.css({maxWidth:`calc(100vw - ${m__default.default.spacingXl})`,maxHeight:`calc(100vh - ${m__default.default.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:css.css({display:"block"}),base:{root:css.cx(css.css({zIndex:m__default.default.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none",transform:o.size==="zen"?"scale(1)":"scale(0.85)",transition:`transform ${m__default.default.transitionDurationDefault} ${m__default.default.transitionEasingDefault}`}),o.size==="zen"?css.css({width:"100%",height:"100%"}):null),afterOpen:css.css({transform:"scale(1) !important"}),beforeClose:css.css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:css.cx(css.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:m__default.default.zIndexModal,opacity:0,transition:`opacity ${m__default.default.transitionDurationDefault} ${m__default.default.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center",padding:m__default.default.spacing2Xl}),o.size==="fullscreen"?css.css({padding:0}):null,o.position==="center"?css.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css.css({opacity:"1 !important"}),beforeClose:css.css({opacity:"0 !important"})},modal:e}}var yo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function go(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=c=>{var M=c,{allowHeightOverflow:o=false,position:e="center",shouldCloseOnEscapePress:t=true,shouldCloseOnOverlayClick:r=true,size:a="medium",testId:s="cf-ui-modal",topOffset:l="50px",aria:d}=M,n=b(M,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var z,I;let T=P__namespace.useRef(null),h=f(i({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:a,testId:s,topOffset:l}),u=V({position:e,size:a,allowHeightOverflow:o,className:n.className,overlayClassName:(z=n.overlayProps)==null?void 0:z.className}),B=()=>{var L,E;let C=T.current;if(C){let N=document.activeElement;if(C!==N&&C.contains(N))return}let v=(L=h.initialFocusRef)==null?void 0:L.current;v?(E=v.focus)==null||E.call(v):C&&go(C);},F=(...C)=>{h.onAfterOpen&&h.onAfterOpen(...C),B();},W=()=>P__namespace.createElement(P__namespace.Fragment,null,n.title&&P__namespace.createElement(w,i({title:n.title,subtitle:n.subtitle,onClose:h.onClose},n.modalHeaderProps)),P__namespace.createElement(O,i({},n.modalContentProps),typeof n.children=="function"?null:n.children));return P__namespace.createElement(Mo__default.default,{ariaHideApp:false,aria:d,onRequestClose:h.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:true,shouldReturnFocusAfterClose:true,portalClassName:u.portal,style:{content:{top:e==="center"?0:l},overlay:(I=n.overlayProps)==null?void 0:I.style},className:{base:u.base.root,afterOpen:u.base.afterOpen,beforeClose:u.base.beforeClose},overlayClassName:{base:u.modalOverlay.root,afterOpen:u.modalOverlay.afterOpen,beforeClose:u.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:C=>{T.current=C;}},P__namespace.createElement(f36Core.Box,{testId:s,style:{width:yo[a]||a},className:u.modal,"data-modal-root":true},typeof n.children=="function"?n.children(h):W()))};j.displayName="Modal";function Z(){return {root:css.css({borderBottomLeftRadius:m__default.default.borderRadiusMedium,borderBottomRightRadius:m__default.default.borderRadiusMedium,padding:`${m__default.default.spacingS} ${m__default.default.spacingM}`,width:"100%",boxSizing:"border-box"})}}var A=a=>{var s=a,{testId:o="cf-ui-modal-controls",className:e,children:t}=s,r=b(s,["testId","className","children"]);let l=Z();return P__namespace.default.createElement(f36Core.Flex,f(i({},r),{className:css.cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),P__namespace.default.createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var x=j;x.Content=O;x.Header=w;x.Controls=A;var eo=({allowHeightOverflow:o=false,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:a="Confirm",confirmTestId:s="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:d=false,isConfirmLoading:n=false,isShown:c,modalContentProps:M,modalControlsProps:T,modalHeaderProps:h,onCancel:u,onConfirm:B,shouldCloseOnEscapePress:F=true,shouldCloseOnOverlayClick:W=true,size:z="medium",testId:I="cf-ui-modal-confirm",title:C="Are you sure?",initialFocusRef:v})=>{let L=P__namespace.default.useRef(null),E=a?P__namespace.default.createElement(f36Button.Button,{testId:s,isDisabled:d,isLoading:n,variant:l,size:"small",onClick:()=>B()},a):null,N=e?P__namespace.default.createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:u,size:"small",ref:v||L},e):null;return P__namespace.default.createElement(x,{testId:I,isShown:c,onClose:u,size:z,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:L},()=>P__namespace.default.createElement(P__namespace.default.Fragment,null,P__namespace.default.createElement(x.Header,f(i({title:C||""},h),{onClose:u})),P__namespace.default.createElement(x.Content,i({},M),r),P__namespace.default.createElement(x.Controls,i({},T),N,E)))};eo.displayName="ModalConfirm";var Ro=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},S=new Map;function wo(){return D(this,null,function*(){let o=Array.from(S.entries());yield Promise.all(o.map(l=>D(null,[l],function*([e,{root:t,render:r,currentConfig:a,delay:s}]){try{let d=f(i({},a),{isShown:!1});r(d),yield new Promise(n=>setTimeout(n,s)),t.unmount();}finally{if(S.has(e)){let d=document.getElementById(e);d&&d.remove(),S.delete(e);}}})));})}function Ho(o,e={}){e=i({delay:300},e);let t=`modals-root-${e.modalId||""}-${Date.now()}-${Math.random()}`,r=Ro(t),a=vo__default.default.createRoot(r);return new Promise(s=>{let l;function d(c){return D(this,null,function*(){l=f(i({},l),{isShown:false}),n(l),yield new Promise(M=>setTimeout(M,e.delay)),a.unmount(),r.remove(),S.delete(t),s(c);})}function n({onClose:c,isShown:M}){a.render(o({onClose:c,isShown:M}));}l={onClose:d,isShown:true},n(l),S.set(t,{root:a,render:n,currentConfig:l,delay:e.delay});})}var Oo={open:Ho,closeAll:wo};exports.Modal=x;exports.ModalConfirm=eo;exports.ModalContent=O;exports.ModalControls=A;exports.ModalHeader=w;exports.ModalLauncher=Oo;//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';var P=require('react'),Mo=require('react-modal'),f36Core=require('@contentful/f36-core'),css=require('@emotion/css'),f36Icons=require('@contentful/f36-icons'),f36Button=require('@contentful/f36-button'),f36Typography=require('@contentful/f36-typography'),m=require('@contentful/f36-tokens'),Ro=require('react-dom/client');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var P__namespace=/*#__PURE__*/_interopNamespace(P);var Mo__default=/*#__PURE__*/_interopDefault(Mo);var m__default=/*#__PURE__*/_interopDefault(m);var Ro__default=/*#__PURE__*/_interopDefault(Ro);var to=Object.defineProperty,no=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var q=(o,e,t)=>e in o?to(o,e,{enumerable:true,configurable:true,writable:true,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))G.call(e,t)&&q(o,t,e[t]);if($)for(var t of $(e))Y.call(e,t)&&q(o,t,e[t]);return o},f=(o,e)=>no(o,ro(e));var b=(o,e)=>{var t={};for(var r in o)G.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&$)for(var r of $(o))e.indexOf(r)<0&&Y.call(o,r)&&(t[r]=o[r]);return t};var D=(o,e,t)=>new Promise((r,a)=>{var s=n=>{try{d(t.next(n));}catch(c){a(c);}},l=n=>{try{d(t.throw(n));}catch(c){a(c);}},d=n=>n.done?r(n.value):Promise.resolve(n.value).then(s,l);d((t=t.apply(o,e)).next());});function K(){return {root:css.css({position:"relative",padding:`${m__default.default.spacingM} ${m__default.default.spacingM} ${m__default.default.spacingM} ${m__default.default.spacingL}`,borderRadius:`${m__default.default.borderRadiusMedium} ${m__default.default.borderRadiusMedium} 0 0`,borderBottom:`1px solid ${m__default.default.gray200}`}),buttonContainer:css.css({position:"relative",width:m__default.default.spacing2Xl,height:m__default.default.spacingL,button:{position:"absolute",top:`calc(-1 * ${m__default.default.spacing2Xs})`,right:0}})}}var w=n=>{var c=n,{onClose:o,title:e,subtitle:t,testId:r="cf-ui-modal-header",className:a,children:s,aria:l={closeIconLabel:"Close"}}=c,d=b(c,["onClose","title","subtitle","testId","className","children","aria"]);let M=K();return P__namespace.default.createElement(f36Core.Flex,f(i({},d),{className:css.cx(M.root,a),testId:r,alignItems:"center",justifyContent:"space-between"}),P__namespace.default.createElement(f36Typography.Subheading,{as:"h2",isTruncated:true,marginBottom:"none"},e,t&&P__namespace.default.createElement(f36Typography.Text,{marginLeft:"spacingXs",fontColor:"gray700"},t)),s,o&&P__namespace.default.createElement(f36Core.Flex,{alignItems:"center",className:M.buttonContainer},P__namespace.default.createElement(f36Button.IconButton,{variant:"transparent","aria-label":l.closeIconLabel,size:"small",icon:P__namespace.default.createElement(f36Icons.XIcon,{size:"small"}),onClick:o})))};w.displayName="ModalHeader";function U(){return {root:css.css({padding:`${m__default.default.spacingM} ${m__default.default.spacingL}`,color:m__default.default.gray700,fontSize:m__default.default.fontSizeM,fontFamily:m__default.default.fontStackPrimary,lineHeight:m__default.default.lineHeightM,overflowY:"auto",overflowX:"auto",boxSizing:"border-box"})}}var O=a=>{var s=a,{testId:o="cf-ui-modal-content",className:e,children:t}=s,r=b(s,["testId","className","children"]);let l=U();return P__namespace.default.createElement(f36Core.Box,f(i({},r),{as:"div",className:css.cx(l.root,e),testId:o}),t)};O.displayName="ModalContent";function V(o){let e=css.cx(css.css({backgroundColor:m__default.default.colorWhite,borderRadius:o.size==="zen"?0:m__default.default.borderRadiusMedium,boxShadow:m__default.default.boxShadowHeavy,maxHeight:`calc(100vh - 1rem * (100 / ${m__default.default.fontBaseDefault}))`,maxWidth:`calc(100vw - 1rem * (100 / ${m__default.default.fontBaseDefault}))`,overflow:"hidden",display:"flex",flexDirection:"column"}),o.allowHeightOverflow?css.css({overflow:"auto",maxHeight:"none"}):null,o.size==="zen"?css.css({maxWidth:"none",maxHeight:"none",margin:0,height:"100%",width:"100%"}):null,o.size==="fullscreen"?css.css({maxWidth:`calc(100vw - ${m__default.default.spacingXl})`,maxHeight:`calc(100vh - ${m__default.default.spacingXl})`,margin:0,height:"100vh",width:"100vw"}):null,o.className);return {portal:css.css({display:"block"}),base:{root:css.cx(css.css({zIndex:m__default.default.zIndexModalContent,position:"relative",padding:0,display:"inline-block",margin:"0 auto",textAlign:"left",outline:"none",transform:o.size==="zen"?"scale(1)":"scale(0.85)",transition:`transform ${m__default.default.transitionDurationDefault} ${m__default.default.transitionEasingDefault}`}),o.size==="zen"?css.css({width:"100%",height:"100%"}):null),afterOpen:css.css({transform:"scale(1) !important"}),beforeClose:css.css({transform:o.size==="zen"?"scale(1)":"scale(0.85) !important"})},modalOverlay:{root:css.cx(css.css({display:"flex",alignItems:"baseline",flexWrap:"wrap",top:0,right:0,bottom:0,left:0,zIndex:m__default.default.zIndexModal,opacity:0,transition:`opacity ${m__default.default.transitionDurationDefault} ${m__default.default.transitionEasingDefault}`,position:"fixed",overflowY:"auto",backgroundColor:"rgba(12, 20, 28, 0.74902)",textAlign:"center",padding:m__default.default.spacing2Xl}),o.size==="fullscreen"?css.css({padding:0}):null,o.position==="center"?css.css({alignItems:"center",justifyContent:"center"}):null,o.overlayClassName),afterOpen:css.css({opacity:"1 !important"}),beforeClose:css.css({opacity:"0 !important"})},modal:e}}var yo={medium:"520px",small:"400px",large:"700px",fullWidth:"100vw",zen:"100vw",fullscreen:"100vw"};function go(o){if(o&&o.querySelectorAll){let e=o.querySelectorAll("input, button");if(e.length>0){let t=e[0];typeof t.focus=="function"&&t.focus();}}}var j=c=>{var M=c,{allowHeightOverflow:o=false,position:e="center",shouldCloseOnEscapePress:t=true,shouldCloseOnOverlayClick:r=true,size:a="medium",testId:s="cf-ui-modal",topOffset:l="50px",aria:d}=M,n=b(M,["allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","testId","topOffset","aria"]);var z,I;let T=P__namespace.useRef(null),h=f(i({},n),{allowHeightOverflow:o,position:e,shouldCloseOnEscapePress:t,shouldCloseOnOverlayClick:r,size:a,testId:s,topOffset:l}),u=V({position:e,size:a,allowHeightOverflow:o,className:n.className,overlayClassName:(z=n.overlayProps)==null?void 0:z.className}),B=()=>{var L,N;let C=T.current;if(C){let E=document.activeElement;if(C!==E&&C.contains(E))return}let R=(L=h.initialFocusRef)==null?void 0:L.current;R?(N=R.focus)==null||N.call(R):C&&go(C);},F=(...C)=>{h.onAfterOpen&&h.onAfterOpen(...C),B();},W=()=>P__namespace.createElement(P__namespace.Fragment,null,n.title&&P__namespace.createElement(w,i({title:n.title,subtitle:n.subtitle,onClose:h.onClose},n.modalHeaderProps)),P__namespace.createElement(O,i({},n.modalContentProps),typeof n.children=="function"?null:n.children));return P__namespace.createElement(Mo__default.default,{ariaHideApp:false,aria:d,onRequestClose:h.onClose,isOpen:n.isShown,onAfterOpen:F,shouldCloseOnEsc:t,shouldCloseOnOverlayClick:r,shouldFocusAfterRender:true,shouldReturnFocusAfterClose:true,portalClassName:u.portal,style:{content:{top:e==="center"?0:l},overlay:(I=n.overlayProps)==null?void 0:I.style},className:{base:u.base.root,afterOpen:u.base.afterOpen,beforeClose:u.base.beforeClose},overlayClassName:{base:u.modalOverlay.root,afterOpen:u.modalOverlay.afterOpen,beforeClose:u.modalOverlay.beforeClose},closeTimeoutMS:200,contentRef:C=>{T.current=C;}},P__namespace.createElement(f36Core.Box,{testId:s,style:{width:yo[a]||a},className:u.modal,"data-modal-root":true},typeof n.children=="function"?n.children(h):W()))};j.displayName="Modal";function Z(){return {root:css.css({borderBottomLeftRadius:m__default.default.borderRadiusMedium,borderBottomRightRadius:m__default.default.borderRadiusMedium,padding:`${m__default.default.spacingS} ${m__default.default.spacingM}`,width:"100%",boxSizing:"border-box"})}}var A=a=>{var s=a,{testId:o="cf-ui-modal-controls",className:e,children:t}=s,r=b(s,["testId","className","children"]);let l=Z();return P__namespace.default.createElement(f36Core.Flex,f(i({},r),{className:css.cx(l.root,e),testId:o,flexDirection:"row",justifyContent:"flex-end"}),P__namespace.default.createElement(f36Button.ButtonGroup,{variant:"spaced",spacing:"spacingS"},t))};A.displayName="ModalControls";var x=j;x.Content=O;x.Header=w;x.Controls=A;var eo=({allowHeightOverflow:o=false,cancelLabel:e="Cancel",cancelTestId:t="cf-ui-modal-confirm-cancel-button",children:r,confirmLabel:a="Confirm",confirmTestId:s="cf-ui-modal-confirm-confirm-button",intent:l="positive",isConfirmDisabled:d=false,isConfirmLoading:n=false,isShown:c,modalContentProps:M,modalControlsProps:T,modalHeaderProps:h,onCancel:u,onConfirm:B,shouldCloseOnEscapePress:F=true,shouldCloseOnOverlayClick:W=true,size:z="medium",testId:I="cf-ui-modal-confirm",title:C="Are you sure?",initialFocusRef:R})=>{let L=P__namespace.default.useRef(null),N=a?P__namespace.default.createElement(f36Button.Button,{testId:s,isDisabled:d,isLoading:n,variant:l,size:"small",onClick:()=>B()},a):null,E=e?P__namespace.default.createElement(f36Button.Button,{testId:t,variant:"secondary",onClick:u,size:"small",ref:R||L},e):null;return P__namespace.default.createElement(x,{testId:I,isShown:c,onClose:u,size:z,shouldCloseOnOverlayClick:W,shouldCloseOnEscapePress:F,allowHeightOverflow:o,initialFocusRef:L},()=>P__namespace.default.createElement(P__namespace.default.Fragment,null,P__namespace.default.createElement(x.Header,f(i({title:C||""},h),{onClose:u})),P__namespace.default.createElement(x.Content,i({},M),r),P__namespace.default.createElement(x.Controls,i({},T),E,N)))};eo.displayName="ModalConfirm";var vo=o=>{let e=document.getElementById(o);return e!==null||(e=document.createElement("div"),e.setAttribute("id",o),document.body.appendChild(e)),e},S=new Map;function wo(){return D(this,null,function*(){let o=Array.from(S.entries());yield Promise.all(o.map(l=>D(null,[l],function*([e,{root:t,render:r,currentConfig:a,delay:s}]){try{let d=f(i({},a),{isShown:!1});r(d),yield new Promise(n=>setTimeout(n,s)),t.unmount();}finally{if(S.has(e)){let d=document.getElementById(e);d&&d.remove(),S.delete(e);}}})));})}function Ho(o,e={}){e=i({delay:300},e);let t=`modals-root-${e.modalId||""}-${Date.now()}-${Math.random()}`,r=vo(t),a=Ro__default.default.createRoot(r);return new Promise(s=>{let l;function d(c){return D(this,null,function*(){l=f(i({},l),{isShown:false}),n(l),yield new Promise(M=>setTimeout(M,e.delay)),a.unmount(),r.remove(),S.delete(t),s(c);})}function n({onClose:c,isShown:M}){a.render(o({onClose:c,isShown:M}));}l={onClose:d,isShown:true},n(l),S.set(t,{root:a,render:n,currentConfig:l,delay:e.delay});})}var Oo={open:Ho,closeAll:wo};exports.Modal=x;exports.ModalConfirm=eo;exports.ModalContent=O;exports.ModalControls=A;exports.ModalHeader=w;exports.ModalLauncher=Oo;//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ModalHeader/ModalHeader.styles.ts","../src/ModalHeader/ModalHeader.tsx","../src/ModalContent/ModalContent.styles.ts","../src/ModalContent/ModalContent.tsx","../src/Modal.styles.ts","../src/Modal.tsx","../src/ModalControls/ModalControls.styles.tsx","../src/ModalControls/ModalControls.tsx","../src/CompoundModal.tsx","../src/ModalConfirm/ModalConfirm.tsx","../src/ModalLauncher/ModalLauncher.tsx"],"names":["getModalHeaderStyles","css","tokens","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","React","Flex","__spreadProps","__spreadValues","cx","Subheading","Text","IconButton","XIcon","getModalContentStyles","ModalContent","Box","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","g","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ReactModal","ref","getModalControlStyles","ModalControls","ButtonGroup","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","Button","cancelButton","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","modals","_0","root","render","currentConfig","delay","config","resolveDelay","el","open","componentRenderer","options","ReactDOM","resolve","result","ModalLauncher"],"mappings":"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","file":"index.js","sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 * ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from '@emotion/css';\nimport { XIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { Text, Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n subtitle?: string;\n onClose?: (event?: React.MouseEvent | React.KeyboardEvent) => void;\n children?: React.ReactNode;\n aria?: {\n closeIconLabel?: string;\n };\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n subtitle,\n testId = 'cf-ui-modal-header',\n className,\n children,\n aria = {\n closeIconLabel: 'Close',\n },\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n {subtitle && (\n <Text marginLeft=\"spacingXs\" fontColor=\"gray700\">\n {subtitle}\n </Text>\n )}\n </Subheading>\n {children}\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <IconButton\n variant=\"transparent\"\n aria-label={aria.closeIconLabel}\n size=\"small\"\n icon={<XIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\nimport { cx } from '@emotion/css';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.size === 'fullscreen'\n ? css({\n maxWidth: `calc(100vw - ${tokens.spacingXl})`,\n maxHeight: `calc(100vh - ${tokens.spacingXl})`,\n margin: 0,\n height: '100vh',\n width: '100vw',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85) !important',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n padding: tokens.spacing2Xl,\n }),\n props.size === 'fullscreen'\n ? css({\n padding: 0,\n })\n : null,\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: '1 !important',\n }),\n beforeClose: css({\n opacity: '0 !important',\n }),\n },\n modal,\n };\n}\n","import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n fullscreen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n\n /**\n * Function that will be run when the modal is requested to be closed, prior to actually closing.\n */\n onClose: ReactModal.Props['onRequestClose'];\n\n /**\n * Function that will be run after the modal has opened.\n */\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /**\n * Additional aria attributes\n */\n aria?: ReactModal.Props['aria'];\n\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * Indicating if modal is centered or linked to the top\n * @default center\n */\n position?: ModalPositionType;\n /**\n * Top offset if position is 'top'\n * @default 50px\n */\n topOffset?: number | string;\n /**\n * Modal title that is used in header\n */\n title?: string;\n /**\n * Modal subtitle that is used in header\n */\n subtitle?: string;\n /**\n * Size of the modal window\n * @default medium\n */\n size?: ModalSizeType | string | number;\n /**\n * Are modals higher than viewport allowed\n * @default false\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override overlay behaviour\n */\n overlayProps?: Pick<CommonProps, 'className' | 'style'>;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode | RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n const onInitialFocus = () => {\n const contentEl = contentRef.current;\n if (contentEl) {\n const activeEl = document.activeElement;\n const isContentContainsActive =\n contentEl !== activeEl && contentEl.contains(activeEl);\n\n if (isContentContainsActive) {\n return;\n }\n }\n\n const initialFocusEl = props.initialFocusRef?.current;\n if (initialFocusEl) {\n initialFocusEl.focus?.();\n } else if (contentEl) {\n focusFirstWithinNode(contentEl);\n }\n };\n\n const onAfterOpen: ModalProps['onAfterOpen'] = (...args) => {\n if (props.onAfterOpen) {\n props.onAfterOpen(...args);\n }\n onInitialFocus();\n };\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n subtitle={otherProps.subtitle}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {typeof otherProps.children === 'function'\n ? null\n : otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] || size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalControlStyles() {\n return {\n root: css({\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n width: `100%`,\n // This is required in places where it is not set globally (e.g. dialogs via the app framework)\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\nimport { getModalControlStyles } from './ModalControls.styles';\nimport { cx } from '@emotion/css';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] | React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n const styles = getModalControlStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n /**\n * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n */\n onConfirm(): void;\n /**\n * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n */\n onCancel: ModalProps['onClose'];\n /**\n Modal title that is used in header\n */\n title?: string;\n /**\n * Label of the confirm button\n */\n confirmLabel?: string | false;\n /**\n * Label of the cancel button\n */\n cancelLabel?: string | false;\n /**\n * The intent of the ModalConfirm. Used for the Button.\n */\n intent?: 'primary' | 'positive' | 'negative';\n /**\n * Size of the modal window\n */\n size?: ModalProps['size'];\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * When true, the confirm button is set to disabled.\n */\n isConfirmDisabled?: boolean;\n /**\n * When true, the confirm button is set to loading.\n */\n isConfirmLoading?: boolean;\n /**\n * Are modals higher than viewport allowed\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional props to override ModalControl behaviour\n */\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /**\n * Optional property to set initial focus\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef || cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header\n title={title || ''}\n {...modalHeaderProps}\n onClose={onCancel}\n />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/* global Promise */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nexport interface ModalLauncherComponentRendererProps<T = unknown> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /**\n * Unique id to be used as identifier for the modal contianer\n */\n modalId?: string;\n /**\n * ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData<T = unknown> {\n root: ReactDOM.Root;\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<T>) => void;\n currentConfig: ModalLauncherComponentRendererProps<T>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nasync function closeAll(): Promise<void> {\n const modals = Array.from(openModalsIds.entries());\n await Promise.all(\n modals.map(async ([rootElId, { root, render, currentConfig, delay }]) => {\n try {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n root.unmount();\n } finally {\n // Only clean up if this entry still exists (avoid race with individual onClose)\n if (openModalsIds.has(rootElId)) {\n const el = document.getElementById(rootElId);\n if (el) el.remove();\n openModalsIds.delete(rootElId);\n }\n }\n }),\n );\n}\n\nfunction open<T = unknown>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => React.ReactElement,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Generate a unique ID for each modal instance to avoid root reuse conflicts\n const rootElId = `modals-root-${options.modalId || ''}-${Date.now()}-${Math.random()}`;\n const rootDom = getRoot(rootElId);\n const root = ReactDOM.createRoot(rootDom);\n return new Promise((resolve) => {\n let currentConfig: ModalLauncherComponentRendererProps<T>;\n\n async function onClose(result?: T) {\n currentConfig = { ...currentConfig, isShown: false };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n root.unmount();\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(result);\n }\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n root.render(componentRenderer({ onClose, isShown }));\n }\n\n currentConfig = { onClose, isShown: true };\n render(currentConfig);\n\n openModalsIds.set(rootElId, {\n root,\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/ModalHeader/ModalHeader.styles.ts","../src/ModalHeader/ModalHeader.tsx","../src/ModalContent/ModalContent.styles.ts","../src/ModalContent/ModalContent.tsx","../src/Modal.styles.ts","../src/Modal.tsx","../src/ModalControls/ModalControls.styles.tsx","../src/ModalControls/ModalControls.tsx","../src/CompoundModal.tsx","../src/ModalConfirm/ModalConfirm.tsx","../src/ModalLauncher/ModalLauncher.tsx"],"names":["getModalHeaderStyles","css","tokens","ModalHeader","_a","_b","onClose","title","subtitle","testId","className","children","aria","otherProps","__objRest","styles","React","Flex","__spreadProps","__spreadValues","cx","Subheading","Text","IconButton","XIcon","getModalContentStyles","ModalContent","Box","getModalStyles","props","modal","ModalSizesMapper","focusFirstWithinNode","node","elements","firstElement","Modal","allowHeightOverflow","position","shouldCloseOnEscapePress","shouldCloseOnOverlayClick","size","topOffset","contentRef","g","onInitialFocus","contentEl","activeEl","initialFocusEl","onAfterOpen","args","renderDefault","ReactModal","ref","getModalControlStyles","ModalControls","ButtonGroup","ModalConfirm","cancelLabel","cancelTestId","confirmLabel","confirmTestId","intent","isConfirmDisabled","isConfirmLoading","isShown","modalContentProps","modalControlsProps","modalHeaderProps","onCancel","onConfirm","initialFocusRef","cancelRef","confirmButton","Button","cancelButton","getRoot","rootElId","rootDom","openModalsIds","closeAll","__async","modals","_0","root","render","currentConfig","delay","config","resolveDelay","el","open","componentRenderer","options","ReactDOM","resolve","result","ModalLauncher"],"mappings":"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","file":"index.js","sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray200}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 * ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport ReactModal from 'react-modal';\nimport { cx } from '@emotion/css';\nimport { XIcon } from '@contentful/f36-icons';\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { Text, Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n subtitle?: string;\n onClose?: ReactModal.Props['onRequestClose'];\n children?: React.ReactNode;\n aria?: {\n closeIconLabel?: string;\n };\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport const ModalHeader = ({\n onClose,\n title,\n subtitle,\n testId = 'cf-ui-modal-header',\n className,\n children,\n aria = {\n closeIconLabel: 'Close',\n },\n ...otherProps\n}: ModalHeaderProps): React.ReactElement => {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h2\" isTruncated marginBottom=\"none\">\n {title}\n {subtitle && (\n <Text marginLeft=\"spacingXs\" fontColor=\"gray700\">\n {subtitle}\n </Text>\n )}\n </Subheading>\n {children}\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <IconButton\n variant=\"transparent\"\n aria-label={aria.closeIconLabel}\n size=\"small\"\n icon={<XIcon size=\"small\" />}\n onClick={onClose}\n />\n </Flex>\n )}\n </Flex>\n );\n};\n\nModalHeader.displayName = 'ModalHeader';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\nimport { cx } from '@emotion/css';\nimport {\n Box,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport const ModalContent = ({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) => {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n};\n\nModalContent.displayName = 'ModalContent';\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n overlayClassName?: string;\n}) {\n const modal = cx(\n css({\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.size === 'fullscreen'\n ? css({\n maxWidth: `calc(100vw - ${tokens.spacingXl})`,\n maxHeight: `calc(100vh - ${tokens.spacingXl})`,\n margin: 0,\n height: '100vh',\n width: '100vw',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85) !important',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n padding: tokens.spacing2Xl,\n }),\n props.size === 'fullscreen'\n ? css({\n padding: 0,\n })\n : null,\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n props.overlayClassName,\n ),\n afterOpen: css({\n opacity: '1 !important',\n }),\n beforeClose: css({\n opacity: '0 !important',\n }),\n },\n modal,\n };\n}\n","import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n fullscreen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n\n /**\n * Function that will be run when the modal is requested to be closed, prior to actually closing.\n */\n onClose: ReactModal.Props['onRequestClose'];\n\n /**\n * Function that will be run after the modal has opened.\n */\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /**\n * Additional aria attributes\n */\n aria?: ReactModal.Props['aria'];\n\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * Indicating if modal is centered or linked to the top\n * @default center\n */\n position?: ModalPositionType;\n /**\n * Top offset if position is 'top'\n * @default 50px\n */\n topOffset?: number | string;\n /**\n * Modal title that is used in header\n */\n title?: string;\n /**\n * Modal subtitle that is used in header\n */\n subtitle?: string;\n /**\n * Size of the modal window\n * @default medium\n */\n size?: ModalSizeType | string | number;\n /**\n * Are modals higher than viewport allowed\n * @default false\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override overlay behaviour\n */\n overlayProps?: Pick<CommonProps, 'className' | 'style'>;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode | RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n overlayClassName: otherProps.overlayProps?.className,\n });\n\n const onInitialFocus = () => {\n const contentEl = contentRef.current;\n if (contentEl) {\n const activeEl = document.activeElement;\n const isContentContainsActive =\n contentEl !== activeEl && contentEl.contains(activeEl);\n\n if (isContentContainsActive) {\n return;\n }\n }\n\n const initialFocusEl = props.initialFocusRef?.current;\n if (initialFocusEl) {\n initialFocusEl.focus?.();\n } else if (contentEl) {\n focusFirstWithinNode(contentEl);\n }\n };\n\n const onAfterOpen: ModalProps['onAfterOpen'] = (...args) => {\n if (props.onAfterOpen) {\n props.onAfterOpen(...args);\n }\n onInitialFocus();\n };\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n subtitle={otherProps.subtitle}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {typeof otherProps.children === 'function'\n ? null\n : otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n overlay: otherProps.overlayProps?.style,\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] || size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalControlStyles() {\n return {\n root: css({\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n width: `100%`,\n // This is required in places where it is not set globally (e.g. dialogs via the app framework)\n boxSizing: 'border-box',\n }),\n };\n}\n","import React from 'react';\n\nimport {\n Flex,\n type PropsWithHTMLElement,\n type CommonProps,\n} from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\nimport { getModalControlStyles } from './ModalControls.styles';\nimport { cx } from '@emotion/css';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] | React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport const ModalControls = ({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement => {\n const styles = getModalControlStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n};\n\nModalControls.displayName = 'ModalControls';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n /**\n * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n */\n onConfirm(): void;\n /**\n * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n */\n onCancel: ModalProps['onClose'];\n /**\n Modal title that is used in header\n */\n title?: string;\n /**\n * Label of the confirm button\n */\n confirmLabel?: string | false;\n /**\n * Label of the cancel button\n */\n cancelLabel?: string | false;\n /**\n * The intent of the ModalConfirm. Used for the Button.\n */\n intent?: 'primary' | 'positive' | 'negative';\n /**\n * Size of the modal window\n */\n size?: ModalProps['size'];\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * When true, the confirm button is set to disabled.\n */\n isConfirmDisabled?: boolean;\n /**\n * When true, the confirm button is set to loading.\n */\n isConfirmLoading?: boolean;\n /**\n * Are modals higher than viewport allowed\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional props to override ModalControl behaviour\n */\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /**\n * Optional property to set initial focus\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of element to give initial focus\n initialFocusRef?: React.RefObject<any>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport const ModalConfirm = ({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) => {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef || cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header\n title={title || ''}\n {...modalHeaderProps}\n onClose={onCancel}\n />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n};\n\nModalConfirm.displayName = 'ModalConfirm';\n","/* global Promise */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nexport interface ModalLauncherComponentRendererProps<T = unknown> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\nexport interface ModalLauncherOpenOptions {\n /**\n * Unique id to be used as identifier for the modal contianer\n */\n modalId?: string;\n /**\n * ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData<T = unknown> {\n root: ReactDOM.Root;\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<T>) => void;\n currentConfig: ModalLauncherComponentRendererProps<T>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nasync function closeAll(): Promise<void> {\n const modals = Array.from(openModalsIds.entries());\n await Promise.all(\n modals.map(async ([rootElId, { root, render, currentConfig, delay }]) => {\n try {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n root.unmount();\n } finally {\n // Only clean up if this entry still exists (avoid race with individual onClose)\n if (openModalsIds.has(rootElId)) {\n const el = document.getElementById(rootElId);\n if (el) el.remove();\n openModalsIds.delete(rootElId);\n }\n }\n }),\n );\n}\n\nfunction open<T = unknown>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => React.ReactElement,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Generate a unique ID for each modal instance to avoid root reuse conflicts\n const rootElId = `modals-root-${options.modalId || ''}-${Date.now()}-${Math.random()}`;\n const rootDom = getRoot(rootElId);\n const root = ReactDOM.createRoot(rootDom);\n return new Promise((resolve) => {\n let currentConfig: ModalLauncherComponentRendererProps<T>;\n\n async function onClose(result?: T) {\n currentConfig = { ...currentConfig, isShown: false };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n root.unmount();\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(result);\n }\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n root.render(componentRenderer({ onClose, isShown }));\n }\n\n currentConfig = { onClose, isShown: true };\n render(currentConfig);\n\n openModalsIds.set(rootElId, {\n root,\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-modal",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.4",
|
|
4
4
|
"description": "Forma 36: Modal component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"@contentful/f36-icons": "^6.0.0-alpha.0",
|
|
12
12
|
"@contentful/f36-tokens": "^6.0.0-alpha.0",
|
|
13
13
|
"@contentful/f36-typography": "^6.0.0-alpha.0",
|
|
14
|
-
"@types/react-modal": "^3.
|
|
14
|
+
"@types/react-modal": "^3.16.3",
|
|
15
15
|
"@emotion/css": "^11.13.5",
|
|
16
16
|
"react-modal": "^3.16.3"
|
|
17
17
|
},
|