@laerdal/life-react-components 3.2.1-dev.12.full → 3.2.1-dev.14

package/dist/InputFields/Textarea.js

@@ -35,9 +35,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var TextareaWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), COLORS.white, COLORS.neutral_400, function (props) {
+var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), COLORS.white, COLORS.neutral_400, function (props) {
   return props.autoHeight ? 'none' : '';
-}, ComponentMStyling(ComponentTextStyle.Italic, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Italic, COLORS.black), COLORS.primary_800, focusStyles, COLORS.critical_500, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800, readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
+}, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, focusStyles, COLORS.critical_500, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800, readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
 var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     placeholder = _ref.placeholder,

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","TextareaWrapper","div","props","margin","TextArea","textarea","white","neutral_400","autoHeight","Italic","black","neutral_500","primary_800","critical_500","correct_500","primary_700","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\nimport { States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons } from '../icons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\nimport {useFocusVisibleRef} from \"../common\";\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  display: block;\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:read-only:not(:disabled) {\n    ${readOnlyState}\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    box-shadow: none !important;\n    color: ${COLORS.neutral_300} !important;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  dataTestId,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        data-testid={dataTestId}\n        ref={elementRef}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400} /> : <SystemIcons.TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","TextareaWrapper","div","props","margin","TextArea","textarea","white","neutral_400","autoHeight","Regular","black","Italic","neutral_500","primary_800","critical_500","correct_500","primary_700","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\nimport { States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons } from '../icons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\nimport {useFocusVisibleRef} from \"../common\";\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  display: block;\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    width: 304px;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:read-only:not(:disabled) {\n    ${readOnlyState}\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    box-shadow: none !important;\n    color: ${COLORS.neutral_300} !important;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  dataTestId,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        data-testid={dataTestId}\n        ref={elementRef}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400} /> : <SystemIcons.TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/dist/Modals/ModalContent.cjs

@@ -34,7 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"])));
 var HeaderTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
 var HeaderActions = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n"])));
-var HeaderWithImageActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    justify-self: flex-end;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
+var HeaderWithImageActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
 var HeaderWithImage = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"])));
 var Header = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), _Tooltips.TooltipContainer);
 var Content = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));

package/dist/Modals/ModalContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","ComponentXXSStyling","neutral_600","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","React","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n  ButtonAction,\n  ModalHeaderIconButton,\n  LeftFooterAction,\n  LeftFooterButton,\n  LeftFooterHyperlink,\n  ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling, Note,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    justify-self: flex-end;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n`;\n\nconst HeaderWithImage = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  image?: ImageWithFallbacksProps;\n  headerActions?: ModalHeaderButtons[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      switch (action.componentType) {\n        case 'icon': {\n          const {icon, componentType, ...rest} = action;\n          return <IconButton key={action.id || index}\n                             {...rest}>\n            {icon}\n          </IconButton>\n        }\n        case 'dropdown': {\n          const {componentType, ...rest} = action;\n          return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n        }\n        case 'toggle': {\n          const {componentType, ...rest} = action;\n          return <ToggleButton  {...rest}/>\n        }\n      }\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        {\n          props.image &&\n          <HeaderWithImage>\n            <ImageWithFallbacks {...props.image}/>\n            <HeaderWithImageActions>\n              {\n                props.onBack &&\n                <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                  <SystemIcons.ArrowLineLeft/>\n                </IconButton>\n\n              }\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderWithImageActions>\n\n            <Header>\n              <HeaderText>\n                <HeaderTitle>{props.title}</HeaderTitle>\n                {!!props.note && <Note>{props.note}</Note>}\n              </HeaderText>\n              <HeaderActions>\n                {tooltip()}\n                {headerActions()}\n              </HeaderActions>\n            </Header>\n          </HeaderWithImage>\n        }\n        {\n          !props.image &&\n          <Header>\n            {\n              props.onBack &&\n              <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                <SystemIcons.ArrowLineLeft/>\n              </IconButton>\n            }\n            <HeaderText>\n              <HeaderTitle>{props.title}</HeaderTitle>\n              {!!props.note && <Note>{props.note}</Note>}\n            </HeaderText>\n            <HeaderActions>\n              {tooltip()}\n              {headerActions()}\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderActions>\n          </Header>\n        }\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
+{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","ComponentXXSStyling","neutral_600","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","React","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n  ButtonAction,\n  ModalHeaderIconButton,\n  LeftFooterAction,\n  LeftFooterButton,\n  LeftFooterHyperlink,\n  ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling, Note,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n`;\n\nconst HeaderWithImage = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  image?: ImageWithFallbacksProps;\n  headerActions?: ModalHeaderButtons[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      switch (action.componentType) {\n        case 'icon': {\n          const {icon, componentType, ...rest} = action;\n          return <IconButton key={action.id || index}\n                             {...rest}>\n            {icon}\n          </IconButton>\n        }\n        case 'dropdown': {\n          const {componentType, ...rest} = action;\n          return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n        }\n        case 'toggle': {\n          const {componentType, ...rest} = action;\n          return <ToggleButton  {...rest}/>\n        }\n      }\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        {\n          props.image &&\n          <HeaderWithImage>\n            <ImageWithFallbacks {...props.image}/>\n            <HeaderWithImageActions>\n              {\n                props.onBack &&\n                <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                  <SystemIcons.ArrowLineLeft/>\n                </IconButton>\n\n              }\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderWithImageActions>\n\n            <Header>\n              <HeaderText>\n                <HeaderTitle>{props.title}</HeaderTitle>\n                {!!props.note && <Note>{props.note}</Note>}\n              </HeaderText>\n              <HeaderActions>\n                {tooltip()}\n                {headerActions()}\n              </HeaderActions>\n            </Header>\n          </HeaderWithImage>\n        }\n        {\n          !props.image &&\n          <Header>\n            {\n              props.onBack &&\n              <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                <SystemIcons.ArrowLineLeft/>\n              </IconButton>\n            }\n            <HeaderText>\n              <HeaderTitle>{props.title}</HeaderTitle>\n              {!!props.note && <Note>{props.note}</Note>}\n            </HeaderText>\n            <HeaderActions>\n              {tooltip()}\n              {headerActions()}\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderActions>\n          </Header>\n        }\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}

package/dist/Modals/ModalContent.js

@@ -28,7 +28,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"])));
 var HeaderTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
 var HeaderActions = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
-var HeaderWithImageActions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    justify-self: flex-end;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
+var HeaderWithImageActions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
 var HeaderWithImage = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"])));
 var Header = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), TooltipContainer);
 var Content = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), scrollBarStyling(Size.Small));

package/dist/Modals/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","Note","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","DropdownButton","ToggleButton","ImageWithFallbacks","HeaderText","div","HeaderTitle","Bold","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","Content","Small","FooterLeftContainer","FooterLeftNote","neutral_600","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n  ButtonAction,\n  ModalHeaderIconButton,\n  LeftFooterAction,\n  LeftFooterButton,\n  LeftFooterHyperlink,\n  ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling, Note,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    justify-self: flex-end;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n`;\n\nconst HeaderWithImage = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  image?: ImageWithFallbacksProps;\n  headerActions?: ModalHeaderButtons[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      switch (action.componentType) {\n        case 'icon': {\n          const {icon, componentType, ...rest} = action;\n          return <IconButton key={action.id || index}\n                             {...rest}>\n            {icon}\n          </IconButton>\n        }\n        case 'dropdown': {\n          const {componentType, ...rest} = action;\n          return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n        }\n        case 'toggle': {\n          const {componentType, ...rest} = action;\n          return <ToggleButton  {...rest}/>\n        }\n      }\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        {\n          props.image &&\n          <HeaderWithImage>\n            <ImageWithFallbacks {...props.image}/>\n            <HeaderWithImageActions>\n              {\n                props.onBack &&\n                <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                  <SystemIcons.ArrowLineLeft/>\n                </IconButton>\n\n              }\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderWithImageActions>\n\n            <Header>\n              <HeaderText>\n                <HeaderTitle>{props.title}</HeaderTitle>\n                {!!props.note && <Note>{props.note}</Note>}\n              </HeaderText>\n              <HeaderActions>\n                {tooltip()}\n                {headerActions()}\n              </HeaderActions>\n            </Header>\n          </HeaderWithImage>\n        }\n        {\n          !props.image &&\n          <Header>\n            {\n              props.onBack &&\n              <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                <SystemIcons.ArrowLineLeft/>\n              </IconButton>\n            }\n            <HeaderText>\n              <HeaderTitle>{props.title}</HeaderTitle>\n              {!!props.note && <Note>{props.note}</Note>}\n            </HeaderText>\n            <HeaderActions>\n              {tooltip()}\n              {headerActions()}\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderActions>\n          </Header>\n        }\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
+{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","Note","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","DropdownButton","ToggleButton","ImageWithFallbacks","HeaderText","div","HeaderTitle","Bold","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","Content","Small","FooterLeftContainer","FooterLeftNote","neutral_600","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n  ButtonAction,\n  ModalHeaderIconButton,\n  LeftFooterAction,\n  LeftFooterButton,\n  LeftFooterHyperlink,\n  ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling, Note,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n`;\n\nconst HeaderWithImage = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  image?: ImageWithFallbacksProps;\n  headerActions?: ModalHeaderButtons[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      switch (action.componentType) {\n        case 'icon': {\n          const {icon, componentType, ...rest} = action;\n          return <IconButton key={action.id || index}\n                             {...rest}>\n            {icon}\n          </IconButton>\n        }\n        case 'dropdown': {\n          const {componentType, ...rest} = action;\n          return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n        }\n        case 'toggle': {\n          const {componentType, ...rest} = action;\n          return <ToggleButton  {...rest}/>\n        }\n      }\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        {\n          props.image &&\n          <HeaderWithImage>\n            <ImageWithFallbacks {...props.image}/>\n            <HeaderWithImageActions>\n              {\n                props.onBack &&\n                <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                  <SystemIcons.ArrowLineLeft/>\n                </IconButton>\n\n              }\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderWithImageActions>\n\n            <Header>\n              <HeaderText>\n                <HeaderTitle>{props.title}</HeaderTitle>\n                {!!props.note && <Note>{props.note}</Note>}\n              </HeaderText>\n              <HeaderActions>\n                {tooltip()}\n                {headerActions()}\n              </HeaderActions>\n            </Header>\n          </HeaderWithImage>\n        }\n        {\n          !props.image &&\n          <Header>\n            {\n              props.onBack &&\n              <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                <SystemIcons.ArrowLineLeft/>\n              </IconButton>\n            }\n            <HeaderText>\n              <HeaderTitle>{props.title}</HeaderTitle>\n              {!!props.note && <Note>{props.note}</Note>}\n            </HeaderText>\n            <HeaderActions>\n              {tooltip()}\n              {headerActions()}\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderActions>\n          </Header>\n        }\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}

package/dist/Table/TableBody.cjs

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = require("../Button");
 var _types = require("../types");
@@ -19,11 +20,14 @@ var _TableStyles = require("./TableStyles");
 var _common = require("../common");
 var _icons = require("../icons");
 var _rooks = require("rooks");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ColumnLabel = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
 var TableBody = function TableBody(props) {
   var _props$noRowsLabel;
   var _useDimensionsRef = (0, _rooks.useDimensionsRef)({
@@ -114,8 +118,15 @@ var TableBody = function TableBody(props) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [column.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellIcon, {
             children: column.icon
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellText, {
-            children: row[column.key]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableCellTextWrapper, {
+            textWrap: !column.shortenText,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellText, {
+              children: row[column.key]
+            }), Boolean(column.noteKey) && Boolean(row[column.noteKey]) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellNoteText, {
+                children: row[column.noteKey]
+              })
+            })]
           })]
         });
     }
@@ -164,13 +175,13 @@ var TableBody = function TableBody(props) {
               tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
               className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$sortProps6 = props.sortProps) === null || _props$sortProps6 === void 0 ? void 0 : _props$sortProps6.column) && !!((_props$sortProps7 = props.sortProps) !== null && _props$sortProps7 !== void 0 && _props$sortProps7.direction) ? 'sorted' : '', " ").concat(column.justify || ''),
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderColumnContent, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnLabel, {
                   children: column.name
                 }), column.key === ((_props$sortProps8 = props.sortProps) === null || _props$sortProps8 === void 0 ? void 0 : _props$sortProps8.column) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderColumnSortDirection, {
                   children: ((_props$sortProps9 = props.sortProps) === null || _props$sortProps9 === void 0 ? void 0 : _props$sortProps9.direction) === 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineUp, {
-                    size: '24px'
+                    size: '20px'
                   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineDown, {
-                    size: '24px'
+                    size: '20px'
                   })
                 })]
               })
@@ -203,8 +214,9 @@ var TableBody = function TableBody(props) {
                 style: {
                   maxWidth: column.width
                 },
-                title: column.shortenText && row[column.key],
+                title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '',
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellContent, {
+                  withNote: Boolean(column.noteKey),
                   className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''),
                   style: {
                     color: column.colorFn && column.colorFn(row, column.key)

package/dist/Table/TableBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.cjs","names":["TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {SystemIcons} from \"../icons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n      switch (column.type) {\n        case 'link': {\n          const tmp = ({\n            variant: 'default',\n            href: '#',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as HyperlinkProps;\n          return (\n            <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                       {...tmp}\n                       onClick={(e) => {\n                         e.preventDefault();\n                         e.stopPropagation();\n                         column.action && column.action(row, e);\n                       }}>\n              {row[column.key]}\n            </HyperLink>\n          );\n        }\n        case 'icon': {\n          const tmp = ({\n            iconColor: column.colorFn && column.colorFn(row, column.key),\n            variant: 'secondary',\n            shape: 'circular',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            useTransparentBackground: true,\n            ...column.additionalProps\n          }) as IconButtonProps;\n          return <IconButton  {...tmp}\n                              action={(e) => {\n                                e?.stopPropagation();\n                                column.action && column.action(row, e);\n                              }}>\n            {column.icon}\n          </IconButton>\n        }\n        case 'button': {\n          const tmp = ({\n            variant: 'tertiary',\n            size: Size.Small,\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as ButtonProps;\n          return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                         {...tmp}\n                         onClick={(e) => {\n                           e?.stopPropagation();\n                           column.action && column.action(row, e);\n                         }}>\n            {row[column.key]}\n          </Button>\n        }\n        case 'boolean':\n          return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n        case 'custom':\n          return column.customContent && column.customContent(row, column.key);\n        case 'number':\n        case 'text':\n        default:\n          return (\n            <>\n              {\n                column.icon &&\n                  <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n              }\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n            </>\n          );\n      }\n    }\n\n  const isSelected = (row: any) => {\n    return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n  }\n\n  return (\n      <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n          <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n          <StyledTableHeaderRow>\n            <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {\n              props.multiSelect &&\n                <StyledTableHeaderColumn>\n                    <StyledTableHeaderColumnContent>\n                        <Checkbox selected={props.selectAllState === 'all'}\n                                  disabled={props.showLoadingIndicator}\n                                  semiSelected={props.selectAllState === 'some'}\n                                  select={props.onSelectAllClick}/>\n                    </StyledTableHeaderColumnContent>\n                </StyledTableHeaderColumn>\n            }\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn key={column.key}\n                                       onMouseDown={defaultOnMouseDownHandler}\n                                       onClick={(e) => column.sortable && props.sortByColumn(column)}\n                                       onKeyPress={(e) => {\n                                         if (e.key === 'Enter' || e.key === ' ') {\n                                           column.sortable && props.sortByColumn(column)\n                                         }\n                                       }}\n                                       aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n                                       aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? \n                                          (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending' )  \n                                          : undefined}\n                                       style={{width: column.width}}\n                                       tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                                       className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${column.justify || ''}`}>\n                <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n                  {\n                    column.key === props.sortProps?.column &&\n                    (\n                      <StyledTableHeaderColumnSortDirection>\n                        {\n                          props.sortProps?.direction === 'asc'\n                            ?  <SystemIcons.ArrowLineUp size={'24px'}/>\n                            : <SystemIcons.ArrowLineDown size={'24px'}/>\n                        }\n                      </StyledTableHeaderColumnSortDirection>\n                    )\n                  }\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n          </StyledTableHeaderRow>\n          <StyledTableBody>\n            {props.currentPageRows.length > 0 ? (\n              props.currentPageRows.map((row: any, index: number) => (\n                <StyledTableBodyRow key={`row_${index}`}\n                                    className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                                    onClick={() => props.onRowClick && props.onRowClick(row)}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onKeyPress={(e) => {\n                                      if (e.key === 'Enter') {\n                                        props.onRowClick && props.onRowClick(row);\n                                      }\n                                    }}\n                                    tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                                    data-testid=\"TestTableDataRow\">\n                  {\n                    props.multiSelect &&\n                      <StyledTableCell>\n                          <StyledTableCellContent>\n                              <Checkbox selected={isSelected(row)}/>\n                          </StyledTableCellContent>\n                      </StyledTableCell>\n                  }\n                  {props.columns.map((column: TableColumn) => (\n                    <StyledTableCell key={`row_${index}_${column.key}`}\n                                     style={{maxWidth: column.width}}\n                                     title={column.shortenText && row[column.key]}>\n                      <StyledTableCellContent\n                        className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                        style={{\n                          color: column.colorFn && column.colorFn(row, column.key),\n                        }}>\n                        {renderCellBody(column, row)}\n                      </StyledTableCellContent>\n                    </StyledTableCell>\n                  ))}\n                </StyledTableBodyRow>\n              ))\n            ) : (\n              <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n                <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                  <StyledTableCellContent className={'center'}>\n                    {props.noRowsLabel ?? 'There are no rows to display'}\n                  </StyledTableCellContent>\n                </StyledTableCell>\n              </StyledTableNoRowsLabelRow>\n            )}\n\n          </StyledTableBody>\n        </StyledTable>\n      </StyledTableBodyWrapper>\n    );\n  }\n;\n\nexport default TableBody;\n"],"mappings":"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"}
+{"version":3,"file":"TableBody.cjs","names":["ColumnLabel","styled","span","TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","shortenText","Boolean","noteKey","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import { TableColumn, TableProps } from './TableTypes';\nimport { Button } from '../Button';\nimport { Size } from '../types';\nimport * as React from 'react';\nimport { Checkbox } from '../InputFields';\nimport { ButtonProps } from '../Button/Button';\nimport IconButton, { IconButtonProps } from '../Button/Iconbutton';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { HyperLink } from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable,\n  StyledTableBodyWrapper,\n  StyledTableHeaderRow,\n  StyledTableHeaderColumnSortDirection,\n  StyledTableCellNoteText,\n  StyledTableCellTextWrapper,\n} from './TableStyles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { SystemIcons } from '../icons';\nimport { useDimensionsRef } from 'rooks';\nimport styled from 'styled-components';\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n}\n\nconst ColumnLabel = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`;\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n    switch (column.type) {\n      case 'link': {\n        const tmp = {\n          variant: 'default',\n          href: '#',\n          tabIndex: props.showLoadingIndicator ? -1 : 0,\n          ...column.additionalProps,\n        } as HyperlinkProps;\n        return (\n          <HyperLink\n            style={column.colorFn && { color: column.colorFn(row, column.key) }}\n            {...tmp}\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              column.action && column.action(row, e);\n            }}>\n            {row[column.key]}\n          </HyperLink>\n        );\n      }\n      case 'icon': {\n        const tmp = {\n          iconColor: column.colorFn && column.colorFn(row, column.key),\n          variant: 'secondary',\n          shape: 'circular',\n          tabIndex: props.showLoadingIndicator ? -1 : 0,\n          useTransparentBackground: true,\n          ...column.additionalProps,\n        } as IconButtonProps;\n        return (\n          <IconButton\n            {...tmp}\n            action={(e) => {\n              e?.stopPropagation();\n              column.action && column.action(row, e);\n            }}>\n            {column.icon}\n          </IconButton>\n        );\n      }\n      case 'button': {\n        const tmp = {\n          variant: 'tertiary',\n          size: Size.Small,\n          tabIndex: props.showLoadingIndicator ? -1 : 0,\n          ...column.additionalProps,\n        } as ButtonProps;\n        return (\n          <Button\n            style={column.colorFn && { color: column.colorFn(row, column.key) }}\n            {...tmp}\n            onClick={(e) => {\n              e?.stopPropagation();\n              column.action && column.action(row, e);\n            }}>\n            {row[column.key]}\n          </Button>\n        );\n      }\n      case 'boolean':\n        return <Checkbox selected={!!row[column.key]} readOnly={true} />;\n      case 'custom':\n        return column.customContent && column.customContent(row, column.key);\n      case 'number':\n      case 'text':\n      default:\n        return (\n          <>\n            {column.icon && <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>}\n            <StyledTableCellTextWrapper textWrap={!column.shortenText}>\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n              {Boolean(column.noteKey) && Boolean(row[column.noteKey!]) && (\n                <>\n                  <StyledTableCellNoteText>{row[column.noteKey!]}</StyledTableCellNoteText>\n                </>\n              )}\n            </StyledTableCellTextWrapper>\n          </>\n        );\n    }\n  };\n\n  const isSelected = (row: any) => {\n    return (\n      (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row))\n    );\n  };\n\n  return (\n    <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n      <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n        <StyledTableHeaderRow>\n          <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {props.multiSelect && (\n              <StyledTableHeaderColumn>\n                <StyledTableHeaderColumnContent>\n                  <Checkbox\n                    selected={props.selectAllState === 'all'}\n                    disabled={props.showLoadingIndicator}\n                    semiSelected={props.selectAllState === 'some'}\n                    select={props.onSelectAllClick}\n                  />\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            )}\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn\n                key={column.key}\n                onMouseDown={defaultOnMouseDownHandler}\n                onClick={(e) => column.sortable && props.sortByColumn(column)}\n                onKeyPress={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    column.sortable && props.sortByColumn(column);\n                  }\n                }}\n                aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n                aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending') : undefined}\n                style={{ width: column.width }}\n                tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${\n                  column.justify || ''\n                }`}>\n                <StyledTableHeaderColumnContent>\n                  <ColumnLabel>{column.name}</ColumnLabel>\n                  {column.key === props.sortProps?.column && (\n                    <StyledTableHeaderColumnSortDirection>\n                      {props.sortProps?.direction === 'asc' ? <SystemIcons.ArrowLineUp size={'20px'} /> : <SystemIcons.ArrowLineDown size={'20px'} />}\n                    </StyledTableHeaderColumnSortDirection>\n                  )}\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n        </StyledTableHeaderRow>\n        <StyledTableBody>\n          {props.currentPageRows.length > 0 ? (\n            props.currentPageRows.map((row: any, index: number) => (\n              <StyledTableBodyRow\n                key={`row_${index}`}\n                className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                onClick={() => props.onRowClick && props.onRowClick(row)}\n                onMouseDown={defaultOnMouseDownHandler}\n                onKeyPress={(e) => {\n                  if (e.key === 'Enter') {\n                    props.onRowClick && props.onRowClick(row);\n                  }\n                }}\n                tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                data-testid=\"TestTableDataRow\">\n                {props.multiSelect && (\n                  <StyledTableCell>\n                    <StyledTableCellContent>\n                      <Checkbox selected={isSelected(row)} />\n                    </StyledTableCellContent>\n                  </StyledTableCell>\n                )}\n                {props.columns.map((column: TableColumn) => (\n                  <StyledTableCell key={`row_${index}_${column.key}`} style={{ maxWidth: column.width }} title={column.shortenText ? `${row[column.key]} \\n ${column.noteKey ? row[column.noteKey!] : ''}` : ''}>\n                    <StyledTableCellContent\n                      withNote={Boolean(column.noteKey)}\n                      className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                      style={{\n                        color: column.colorFn && column.colorFn(row, column.key),\n                      }}>\n                      {renderCellBody(column, row)}\n                    </StyledTableCellContent>\n                  </StyledTableCell>\n                ))}\n              </StyledTableBodyRow>\n            ))\n          ) : (\n            <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n              <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                <StyledTableCellContent className={'center'}>{props.noRowsLabel ?? 'There are no rows to display'}</StyledTableCellContent>\n              </StyledTableCell>\n            </StyledTableNoRowsLabelRow>\n          )}\n        </StyledTableBody>\n      </StyledTable>\n    </StyledTableBodyWrapper>\n  );\n};\nexport default TableBody;\n"],"mappings":"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"}

package/dist/Table/TableBody.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Button } from '../Button';
@@ -9,13 +11,15 @@ import * as React from 'react';
 import { Checkbox } from '../InputFields';
 import IconButton from '../Button/Iconbutton';
 import { HyperLink } from '../HyperLink';
-import { StyledTableBody, StyledTableBodyRow, StyledTableCell, StyledTableCellContent, StyledTableCellIcon, StyledTableCellText, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableNoRowsLabelRow, StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection } from './TableStyles';
+import { StyledTableBody, StyledTableBodyRow, StyledTableCell, StyledTableCellContent, StyledTableCellIcon, StyledTableCellText, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableNoRowsLabelRow, StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection, StyledTableCellNoteText, StyledTableCellTextWrapper } from './TableStyles';
 import { defaultOnMouseDownHandler } from '../common';
-import { SystemIcons } from "../icons";
-import { useDimensionsRef } from "rooks";
+import { SystemIcons } from '../icons';
+import { useDimensionsRef } from 'rooks';
+import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var ColumnLabel = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
 var TableBody = function TableBody(props) {
   var _props$noRowsLabel;
   var _useDimensionsRef = useDimensionsRef({
@@ -106,8 +110,15 @@ var TableBody = function TableBody(props) {
         return /*#__PURE__*/_jsxs(_Fragment, {
           children: [column.icon && /*#__PURE__*/_jsx(StyledTableCellIcon, {
             children: column.icon
-          }), /*#__PURE__*/_jsx(StyledTableCellText, {
-            children: row[column.key]
+          }), /*#__PURE__*/_jsxs(StyledTableCellTextWrapper, {
+            textWrap: !column.shortenText,
+            children: [/*#__PURE__*/_jsx(StyledTableCellText, {
+              children: row[column.key]
+            }), Boolean(column.noteKey) && Boolean(row[column.noteKey]) && /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx(StyledTableCellNoteText, {
+                children: row[column.noteKey]
+              })
+            })]
           })]
         });
     }
@@ -156,13 +167,13 @@ var TableBody = function TableBody(props) {
               tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
               className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$sortProps6 = props.sortProps) === null || _props$sortProps6 === void 0 ? void 0 : _props$sortProps6.column) && !!((_props$sortProps7 = props.sortProps) !== null && _props$sortProps7 !== void 0 && _props$sortProps7.direction) ? 'sorted' : '', " ").concat(column.justify || ''),
               children: /*#__PURE__*/_jsxs(StyledTableHeaderColumnContent, {
-                children: [/*#__PURE__*/_jsx("span", {
+                children: [/*#__PURE__*/_jsx(ColumnLabel, {
                   children: column.name
                 }), column.key === ((_props$sortProps8 = props.sortProps) === null || _props$sortProps8 === void 0 ? void 0 : _props$sortProps8.column) && /*#__PURE__*/_jsx(StyledTableHeaderColumnSortDirection, {
                   children: ((_props$sortProps9 = props.sortProps) === null || _props$sortProps9 === void 0 ? void 0 : _props$sortProps9.direction) === 'asc' ? /*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
-                    size: '24px'
+                    size: '20px'
                   }) : /*#__PURE__*/_jsx(SystemIcons.ArrowLineDown, {
-                    size: '24px'
+                    size: '20px'
                   })
                 })]
               })
@@ -195,8 +206,9 @@ var TableBody = function TableBody(props) {
                 style: {
                   maxWidth: column.width
                 },
-                title: column.shortenText && row[column.key],
+                title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '',
                 children: /*#__PURE__*/_jsx(StyledTableCellContent, {
+                  withNote: Boolean(column.noteKey),
                   className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''),
                   style: {
                     color: column.colorFn && column.colorFn(row, column.key)