@laerdal/life-react-components 1.6.1-dev.1 → 1.7.0

package/dist/Modals/ModalDialog.cjs

@@ -37,6 +37,7 @@ var ModalDialog = function ModalDialog(_ref) {
       closeModalAndClearInput = _ref.closeModalAndClearInput,
       title = _ref.title,
       topImage = _ref.topImage,
+      topImageWithFallbacksProps = _ref.topImageWithFallbacksProps,
       buttons = _ref.buttons,
       leftFooterAction = _ref.leftFooterAction,
       backButton = _ref.backButton,
@@ -48,7 +49,10 @@ var ModalDialog = function ModalDialog(_ref) {
       state = _ref.state,
       icon = _ref.icon,
       yOffset = _ref.yOffset,
-      zIndex = _ref.zIndex;
+      zIndex = _ref.zIndex,
+      contentOverflow = _ref.contentOverflow,
+      width = _ref.width,
+      hasContentBorders = _ref.hasContentBorders;
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
@@ -126,31 +130,53 @@ var ModalDialog = function ModalDialog(_ref) {
     }
   };
 
-  var ModalTitle = function ModalTitle(title, size) {
+  var getMaxHeight = function getMaxHeight() {
     switch (size) {
       case _types.Size.Small:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentM, {
-          textStyle: _styles.ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 56px)';
 
       case _types.Size.Medium:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentL, {
-          textStyle: _styles.ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 76px)';
 
       case _types.Size.Large:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXL, {
-          textStyle: _styles.ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 96px)';
 
       default:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentL, {
-          textStyle: _styles.ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 72px)';
+    }
+  };
+
+  var ModalTitle = function ModalTitle(title, size) {
+    if (typeof size === 'string') {
+      switch (size) {
+        case _types.Size.Small:
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentM, {
+            textStyle: _styles.ComponentTextStyle.Bold,
+            children: title
+          });
+
+        case _types.Size.Medium:
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentL, {
+            textStyle: _styles.ComponentTextStyle.Bold,
+            children: title
+          });
+
+        case _types.Size.Large:
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXL, {
+            textStyle: _styles.ComponentTextStyle.Bold,
+            children: title
+          });
+
+        default:
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentL, {
+            textStyle: _styles.ComponentTextStyle.Bold,
+            children: title
+          });
+      }
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: title
+      });
     }
   };
 
@@ -178,7 +204,7 @@ var ModalDialog = function ModalDialog(_ref) {
 
   var ModalCloseButton = function ModalCloseButton(onClick) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.CloseButtonWrapper, {
-      hasImage: !!topImage,
+      hasImage: !!topImage || !!topImageWithFallbacksProps,
       size: size,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         variant: "secondary",
@@ -198,7 +224,7 @@ var ModalDialog = function ModalDialog(_ref) {
   var ModalBackButton = function ModalBackButton() {
     if (backButton) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.BackButtonWrapper, {
-        hasImage: !!topImage,
+        hasImage: !!topImage || !!topImageWithFallbacksProps,
         size: size,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
           variant: "secondary",
@@ -296,28 +322,41 @@ var ModalDialog = function ModalDialog(_ref) {
     modalHeight: "auto",
     padding: getPadding(),
     zIndex: zIndex,
+    modalWidth: width,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.Column, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
         onSubmit: submitAction,
-        children: [topImage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.StyledModalHeader, {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          maxHeight: getMaxHeight()
+        },
+        children: [(topImage || topImageWithFallbacksProps) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.StyledModalHeader, {
           size: size,
           height: getImageHeight(),
           marginBottom: getMarginBottom(),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          children: [topImage && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
             src: topImage,
             alt: "Modal top"
+          }), !topImage && topImageWithFallbacksProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ImageWithFallbacks, {
+            loader: topImageWithFallbacksProps.loader,
+            alt: topImageWithFallbacksProps.alt,
+            fallbacks: topImageWithFallbacksProps.fallbacks,
+            src: topImageWithFallbacksProps.src
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalHeaderActionsWithImage, {
             hasBackButton: !!backButton,
             children: [ModalBackButton(), ModalCloseButton(closeAction)]
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalTitleSection, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.FlexContainer, {
-            children: [!topImage && ModalBackButton(), title && ModalTitle(title, size)]
+            children: [!(topImage || topImageWithFallbacksProps) && ModalBackButton(), title && ModalTitle(title, size)]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalHeaderActions, {
-            children: [tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction)]
+            children: [tooltip && ModalTootip(tooltip), !(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)]
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalBody, {
           size: size,
+          overflow: contentOverflow,
+          hasContentBorders: hasContentBorders,
           children: children
         }), note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalNote.ModalNote, {
           note: note,
@@ -348,7 +387,7 @@ exports.ModalDialog = ModalDialog;
 ModalDialog.propTypes = {
   isModalOpen: _propTypes.default.bool.isRequired,
   closeModalAndClearInput: _propTypes.default.any.isRequired,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   topImage: _propTypes.default.any,
   buttons: _propTypes.default.array,
   tooltip: _propTypes.default.string,
@@ -359,7 +398,10 @@ ModalDialog.propTypes = {
   state: _propTypes.default.string,
   icon: _propTypes.default.node,
   yOffset: _propTypes.default.number,
-  zIndex: _propTypes.default.number
+  zIndex: _propTypes.default.number,
+  contentOverflow: _propTypes.default.string,
+  width: _propTypes.default.string,
+  hasContentBorders: _propTypes.default.bool
 };
 var _default = ModalDialog;
 exports.default = _default;

package/dist/Modals/ModalDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex\n}) => {\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(()=>{\n    let yPos = yOffset ? yOffset : 0;\n    if(isModalOpen){      \n      document.body.setAttribute('style', `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`);\n    }\n    return ()=>{\n      document.body.setAttribute('style','');\n      window.scrollTo(0,yPos);\n    }\n  },[isModalOpen]);\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()} zIndex={zIndex}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string | React.ReactNode;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n  contentOverflow?: string;\n  width?: string;\n  hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  topImageWithFallbacksProps,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex,\n  contentOverflow,\n  width,\n  hasContentBorders,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n    if (typeof size === 'string') {\n      switch (size) {\n        case Size.Small:\n          return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n        case Size.Medium:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n        case Size.Large:\n          return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n        default:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      }\n    } else {\n      return <>{title}</>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(() => {\n    let yPos = yOffset ? yOffset : 0;\n    if (isModalOpen) {\n      document.body.setAttribute(\n        'style',\n        `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`,\n      );\n    }\n    return () => {\n      document.body.setAttribute('style', '');\n      window.scrollTo(0, yPos);\n    };\n  }, [isModalOpen]);\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      modalHeight=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}\n      modalWidth={width}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              {topImage && <img src={topImage} alt=\"Modal top\" />}\n              {!topImage && topImageWithFallbacksProps && (\n                <ImageWithFallbacks\n                  loader={topImageWithFallbacksProps.loader}\n                  alt={topImageWithFallbacksProps.alt}\n                  fallbacks={topImageWithFallbacksProps.fallbacks}\n                  src={topImageWithFallbacksProps.src}></ImageWithFallbacks>\n              )}\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n            {children}\n          </ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}

package/dist/Modals/ModalDialog.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Size } from '../types';
 import { ButtonAction, LeftFooterAction } from './ModalTypes';
+import { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';
 interface NewModalProps {
     size?: Size;
     isModalOpen: boolean;
     closeModalAndClearInput: any;
-    title?: string;
+    title?: string | React.ReactNode;
     topImage?: any;
+    topImageWithFallbacksProps?: ImageWithFallbacksProps;
     buttons?: ButtonAction[];
     leftFooterAction?: LeftFooterAction;
     tooltip?: string;
@@ -18,6 +20,9 @@ interface NewModalProps {
     icon?: React.ReactNode;
     yOffset?: number;
     zIndex?: number;
+    contentOverflow?: string;
+    width?: string;
+    hasContentBorders?: boolean;
 }
 export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
 export default ModalDialog;

package/dist/Modals/ModalDialog.js

@@ -8,8 +8,9 @@ import ModalContainer from './ModalContainer';
 import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader, ModalHoverModifier } from './ModalStyles';
 import { ModalNote } from './ModalNote';
 import { TooltipWrapper } from '../Tooltips';
-import { HyperLink } from '..';
+import { HyperLink, ImageWithFallbacks } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ModalDialog = function ModalDialog(_ref) {
   var size = _ref.size,
@@ -17,6 +18,7 @@ export var ModalDialog = function ModalDialog(_ref) {
       closeModalAndClearInput = _ref.closeModalAndClearInput,
       title = _ref.title,
       topImage = _ref.topImage,
+      topImageWithFallbacksProps = _ref.topImageWithFallbacksProps,
       buttons = _ref.buttons,
       leftFooterAction = _ref.leftFooterAction,
       backButton = _ref.backButton,
@@ -28,7 +30,10 @@ export var ModalDialog = function ModalDialog(_ref) {
       state = _ref.state,
       icon = _ref.icon,
       yOffset = _ref.yOffset,
-      zIndex = _ref.zIndex;
+      zIndex = _ref.zIndex,
+      contentOverflow = _ref.contentOverflow,
+      width = _ref.width,
+      hasContentBorders = _ref.hasContentBorders;
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
@@ -106,31 +111,53 @@ export var ModalDialog = function ModalDialog(_ref) {
     }
   };
 
-  var ModalTitle = function ModalTitle(title, size) {
+  var getMaxHeight = function getMaxHeight() {
     switch (size) {
       case Size.Small:
-        return /*#__PURE__*/_jsx(ComponentM, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 56px)';
 
       case Size.Medium:
-        return /*#__PURE__*/_jsx(ComponentL, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 76px)';
 
       case Size.Large:
-        return /*#__PURE__*/_jsx(ComponentXL, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 96px)';
 
       default:
-        return /*#__PURE__*/_jsx(ComponentL, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
+        return 'calc(100vh - 72px)';
+    }
+  };
+
+  var ModalTitle = function ModalTitle(title, size) {
+    if (typeof size === 'string') {
+      switch (size) {
+        case Size.Small:
+          return /*#__PURE__*/_jsx(ComponentM, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+
+        case Size.Medium:
+          return /*#__PURE__*/_jsx(ComponentL, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+
+        case Size.Large:
+          return /*#__PURE__*/_jsx(ComponentXL, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+
+        default:
+          return /*#__PURE__*/_jsx(ComponentL, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+      }
+    } else {
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: title
+      });
     }
   };
 
@@ -158,7 +185,7 @@ export var ModalDialog = function ModalDialog(_ref) {
 
   var ModalCloseButton = function ModalCloseButton(onClick) {
     return /*#__PURE__*/_jsx(CloseButtonWrapper, {
-      hasImage: !!topImage,
+      hasImage: !!topImage || !!topImageWithFallbacksProps,
       size: size,
       children: /*#__PURE__*/_jsx(IconButton, {
         variant: "secondary",
@@ -178,7 +205,7 @@ export var ModalDialog = function ModalDialog(_ref) {
   var ModalBackButton = function ModalBackButton() {
     if (backButton) {
       return /*#__PURE__*/_jsx(BackButtonWrapper, {
-        hasImage: !!topImage,
+        hasImage: !!topImage || !!topImageWithFallbacksProps,
         size: size,
         children: /*#__PURE__*/_jsx(IconButton, {
           variant: "secondary",
@@ -275,28 +302,41 @@ export var ModalDialog = function ModalDialog(_ref) {
     modalHeight: "auto",
     padding: getPadding(),
     zIndex: zIndex,
+    modalWidth: width,
     children: /*#__PURE__*/_jsx(Column, {
       children: /*#__PURE__*/_jsxs("form", {
         onSubmit: submitAction,
-        children: [topImage && /*#__PURE__*/_jsxs(StyledModalHeader, {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          maxHeight: getMaxHeight()
+        },
+        children: [(topImage || topImageWithFallbacksProps) && /*#__PURE__*/_jsxs(StyledModalHeader, {
           size: size,
           height: getImageHeight(),
           marginBottom: getMarginBottom(),
-          children: [/*#__PURE__*/_jsx("img", {
+          children: [topImage && /*#__PURE__*/_jsx("img", {
             src: topImage,
             alt: "Modal top"
+          }), !topImage && topImageWithFallbacksProps && /*#__PURE__*/_jsx(ImageWithFallbacks, {
+            loader: topImageWithFallbacksProps.loader,
+            alt: topImageWithFallbacksProps.alt,
+            fallbacks: topImageWithFallbacksProps.fallbacks,
+            src: topImageWithFallbacksProps.src
           }), /*#__PURE__*/_jsxs(ModalHeaderActionsWithImage, {
             hasBackButton: !!backButton,
             children: [ModalBackButton(), ModalCloseButton(closeAction)]
           })]
         }), /*#__PURE__*/_jsxs(ModalTitleSection, {
           children: [/*#__PURE__*/_jsxs(FlexContainer, {
-            children: [!topImage && ModalBackButton(), title && ModalTitle(title, size)]
+            children: [!(topImage || topImageWithFallbacksProps) && ModalBackButton(), title && ModalTitle(title, size)]
           }), /*#__PURE__*/_jsxs(ModalHeaderActions, {
-            children: [tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction)]
+            children: [tooltip && ModalTootip(tooltip), !(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)]
           })]
         }), /*#__PURE__*/_jsx(ModalBody, {
           size: size,
+          overflow: contentOverflow,
+          hasContentBorders: hasContentBorders,
           children: children
         }), note && /*#__PURE__*/_jsx(ModalNote, {
           note: note,
@@ -325,7 +365,7 @@ export var ModalDialog = function ModalDialog(_ref) {
 ModalDialog.propTypes = {
   isModalOpen: _pt.bool.isRequired,
   closeModalAndClearInput: _pt.any.isRequired,
-  title: _pt.string,
+  title: _pt.oneOfType([_pt.string, _pt.node]),
   topImage: _pt.any,
   buttons: _pt.array,
   tooltip: _pt.string,
@@ -336,7 +376,10 @@ ModalDialog.propTypes = {
   state: _pt.string,
   icon: _pt.node,
   yOffset: _pt.number,
-  zIndex: _pt.number
+  zIndex: _pt.number,
+  contentOverflow: _pt.string,
+  width: _pt.string,
+  hasContentBorders: _pt.bool
 };
 export default ModalDialog;
 //# sourceMappingURL=ModalDialog.js.map

package/dist/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex\n}) => {\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(()=>{\n    let yPos = yOffset ? yOffset : 0;\n    if(isModalOpen){      \n      document.body.setAttribute('style', `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`);\n    }\n    return ()=>{\n      document.body.setAttribute('style','');\n      window.scrollTo(0,yPos);\n    }\n  },[isModalOpen]);\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()} zIndex={zIndex}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string | React.ReactNode;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n  contentOverflow?: string;\n  width?: string;\n  hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  topImageWithFallbacksProps,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex,\n  contentOverflow,\n  width,\n  hasContentBorders,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n    if (typeof size === 'string') {\n      switch (size) {\n        case Size.Small:\n          return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n        case Size.Medium:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n        case Size.Large:\n          return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n        default:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      }\n    } else {\n      return <>{title}</>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(() => {\n    let yPos = yOffset ? yOffset : 0;\n    if (isModalOpen) {\n      document.body.setAttribute(\n        'style',\n        `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`,\n      );\n    }\n    return () => {\n      document.body.setAttribute('style', '');\n      window.scrollTo(0, yPos);\n    };\n  }, [isModalOpen]);\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      modalHeight=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}\n      modalWidth={width}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              {topImage && <img src={topImage} alt=\"Modal top\" />}\n              {!topImage && topImageWithFallbacksProps && (\n                <ImageWithFallbacks\n                  loader={topImageWithFallbacksProps.loader}\n                  alt={topImageWithFallbacksProps.alt}\n                  fallbacks={topImageWithFallbacksProps.fallbacks}\n                  src={topImageWithFallbacksProps.src}></ImageWithFallbacks>\n              )}\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n            {children}\n          </ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/Modals/ModalStyles.cjs

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _ = require("..");
 
+var _styles = require("../styles");
+
 var _types = require("../types");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
@@ -31,7 +33,7 @@ var ModalHeader = _styledComponents.default.section(_templateObject || (_templat
 });
 
 exports.ModalHeader = ModalHeader;
-var StyledModalHeader = (0, _styledComponents.default)(ModalHeader)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n"])), function (props) {
+var StyledModalHeader = (0, _styledComponents.default)(ModalHeader)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n"])), function (props) {
   return props.height ? "".concat(props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24), "px") : '';
 }, function (props) {
   return "".concat(props.height, "px");
@@ -96,7 +98,19 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_
 
 exports.ModalNoteSection = ModalNoteSection;
 
-var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n\n  > :first-child {\n    margin-top: ", ";\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+  var _props$overflow;
+
+  return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px 0" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px 0' : '12px 0';
+}, function (props) {
+  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(_.COLORS.neutral_100) : 'none';
+}, function (props) {
+  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(_.COLORS.neutral_100) : 'none';
+}, (0, _styles.scrollBarStyling)(_types.Size.Small), function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '8px' : '12px';
+}, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
@@ -104,9 +118,7 @@ var ModalBody = _styledComponents.default.section(_templateObject15 || (_templat
 
 exports.ModalBody = ModalBody;
 
-var ModalFooter = _styledComponents.default.section(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Small ? "20px" : (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Large ? '28px' : '24px';
-}, function (props) {
+var ModalFooter = _styledComponents.default.section(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';