npm - @contentful/f36-modal - Versions diffs - 4.17.0 → 4.18.0 - Mend

@contentful/f36-modal 4.17.0 → 4.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +10 -0
package/dist/{types.d.ts → index.d.ts} +35 -26
package/dist/index.js +49 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +15 -0
package/dist/index.mjs.map +1 -0
package/package.json +9 -9
package/dist/main.js +0 -440
package/dist/main.js.map +0 -1
package/dist/module.js +0 -428
package/dist/module.js.map +0 -1
package/dist/types.d.ts.map +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,15 @@
 # Change Log
+## 4.18.0
+### Patch Changes
+- Updated dependencies []:
+  - @contentful/f36-button@4.18.0
+  - @contentful/f36-icons@4.18.0
+  - @contentful/f36-typography@4.18.0
+  - @contentful/f36-core@4.18.0
 ## 4.17.0
 ### Patch Changes

package/dist/{types.d.ts → index.d.ts} RENAMED Viewed

@@ -1,26 +1,31 @@
-import React from "react";
-import { PropsWithHTMLElement, CommonProps, ExpandProps } from "@contentful/f36-core";
-import ReactModal from "react-modal";
+import * as React from 'react';
+import React__default from 'react';
+import ReactModal from 'react-modal';
+import { PropsWithHTMLElement, CommonProps, ExpandProps } from '@contentful/f36-core';
 interface ModalHeaderInternalProps extends CommonProps {
     title: string;
     onClose?: Function;
 }
-export type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
-export const ModalHeader: {
-    ({ onClose, title, testId, className, ...otherProps }: ModalHeaderProps): React.ReactElement;
+declare type ModalHeaderProps = PropsWithHTMLElement<ModalHeaderInternalProps, 'div'>;
+declare const ModalHeader: {
+    ({ onClose, title, testId, className, ...otherProps }: ModalHeaderProps): React__default.ReactElement;
     displayName: string;
 };
 interface ModalContentInternalProps extends CommonProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 }
-export type ModalContentProps = PropsWithHTMLElement<ModalContentInternalProps, 'div'>;
-export const ModalContent: {
+declare type ModalContentProps = PropsWithHTMLElement<ModalContentInternalProps, 'div'>;
+declare const ModalContent: {
     ({ testId, className, children, ...otherProps }: ModalContentProps): JSX.Element;
     displayName: string;
 };
-type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen';
-type ModalPositionType = 'center' | 'top';
-export interface ModalProps extends CommonProps {
+declare type ModalSizeType = 'small' | 'medium' | 'large' | 'fullWidth' | 'zen';
+declare type ModalPositionType = 'center' | 'top';
+interface ModalProps extends CommonProps {
     /**
      * When true, the dialog is shown.
      */
@@ -89,26 +94,29 @@ export interface ModalProps extends CommonProps {
     initialFocusRef?: React.RefObject<HTMLElement>;
     children: React.ReactNode | RenderModal;
 }
-type RenderModal = (modalProps: ModalProps) => React.ReactNode;
-declare const _Modal1: {
+declare type RenderModal = (modalProps: ModalProps) => React.ReactNode;
+declare const Modal$1: {
     ({ allowHeightOverflow, position, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, topOffset, aria, ...otherProps }: ExpandProps<ModalProps>): JSX.Element;
     displayName: string;
 };
 interface ModalControlsInternalProps extends CommonProps {
-    children: React.ReactElement[] | React.ReactElement;
+    children: React__default.ReactElement[] | React__default.ReactElement;
 }
-export type ModalControlsProps = PropsWithHTMLElement<ModalControlsInternalProps, 'div'>;
-export const ModalControls: {
-    ({ testId, className, children, ...otherProps }: ModalControlsProps): React.ReactElement;
+declare type ModalControlsProps = PropsWithHTMLElement<ModalControlsInternalProps, 'div'>;
+declare const ModalControls: {
+    ({ testId, className, children, ...otherProps }: ModalControlsProps): React__default.ReactElement;
     displayName: string;
 };
-type CompoundModal = typeof _Modal1 & {
+declare type CompoundModal = typeof Modal$1 & {
     Content: typeof ModalContent;
     Header: typeof ModalHeader;
     Controls: typeof ModalControls;
 };
-export const Modal: CompoundModal;
-export interface ModalConfirmProps {
+declare const Modal: CompoundModal;
+interface ModalConfirmProps {
     /**
      * When true, the dialog is shown.
      */
@@ -176,16 +184,17 @@ export interface ModalConfirmProps {
     /**
      * Optional property to set initial focus
      */
-    initialFocusRef?: React.RefObject<any>;
+    initialFocusRef?: React__default.RefObject<any>;
     testId?: string;
     confirmTestId?: string;
     cancelTestId?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 }
-export const ModalConfirm: {
+declare const ModalConfirm: {
     ({ allowHeightOverflow, cancelLabel, cancelTestId, children, confirmLabel, confirmTestId, intent, isConfirmDisabled, isConfirmLoading, isShown, modalContentProps, modalControlsProps, modalHeaderProps, onCancel, onConfirm, shouldCloseOnEscapePress, shouldCloseOnOverlayClick, size, testId, title, initialFocusRef, }: ModalConfirmProps): JSX.Element;
     displayName: string;
 };
 interface ModalLauncherComponentRendererProps<T = any> {
     isShown: boolean;
     onClose: (result?: T) => void;
@@ -203,9 +212,9 @@ interface ModalLauncherOpenOptions {
 }
 declare function closeAll(): void;
 declare function open<T = any>(componentRenderer: (props: ModalLauncherComponentRendererProps<T>) => JSX.Element, options?: ModalLauncherOpenOptions): Promise<T>;
-export const ModalLauncher: {
+declare const ModalLauncher: {
     open: typeof open;
     closeAll: typeof closeAll;
 };
-//# sourceMappingURL=types.d.ts.map
+export { Modal, ModalConfirm, ModalConfirmProps, ModalContent, ModalContentProps, ModalControls, ModalControlsProps, ModalHeader, ModalHeaderProps, ModalLauncher, ModalProps };

package/dist/index.js ADDED Viewed

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

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/index.mjs ADDED Viewed

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

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,17 +1,17 @@
 {
   "name": "@contentful/f36-modal",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "Forma 36: Modal component",
   "scripts": {
-    "build": "parcel build"
+    "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-button": "^4.17.0",
-    "@contentful/f36-core": "^4.17.0",
-    "@contentful/f36-icons": "^4.17.0",
+    "@contentful/f36-button": "^4.18.0",
+    "@contentful/f36-core": "^4.18.0",
+    "@contentful/f36-icons": "^4.18.0",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-typography": "^4.17.0",
+    "@contentful/f36-typography": "^4.18.0",
     "@types/react-modal": "^3.12.1",
     "emotion": "^10.0.17",
     "react-modal": "^3.14.3"
@@ -24,9 +24,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
   "browserslist": "extends @contentful/browserslist-config",