@contentful/f36-modal - npm Package Compare versions

Comparing version 4.60.0 to 4.60.1

dist/esm/index.js

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

dist/index.js

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

package.json

 {
   "name": "@contentful/f36-modal",
-  "version": "4.60.0",
+  "version": "4.60.1",
   "description": "Forma 36: Modal component",
@@ -9,7 +9,7 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-button": "^4.60.0",
-    "@contentful/f36-core": "^4.60.0",
+    "@contentful/f36-button": "^4.60.1",
+    "@contentful/f36-core": "^4.60.1",
     "@contentful/f36-icons": "^4.27.0",
     "@contentful/f36-tokens": "^4.0.4",
-    "@contentful/f36-typography": "^4.60.0",
+    "@contentful/f36-typography": "^4.60.1",
     "@types/react-modal": "^3.13.1",
@@ -16,0 +16,0 @@ "emotion": "^10.0.17",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102992

increased by0.26%

Dependency changes

• Updated@contentful/f36-button@^4.60.1

• Updated@contentful/f36-core@^4.60.1

• Updated@contentful/f36-typography@^4.60.1