@laerdal/life-react-components 1.3.2-dev.9 → 1.4.0

package/dist/umd/Modals/ModalDialog.js.map

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

package/dist/umd/Modals/ModalNote.js

@@ -123,7 +123,7 @@
   };
 
   ModalNote.propTypes = {
-    note: _propTypes2.default.string.isRequired,
+    note: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]).isRequired,
     icon: _propTypes2.default.node,
     state: _propTypes2.default.string,
     size: _propTypes2.default.string

package/dist/umd/Modals/ModalNote.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalNote.tsx"],"names":["note","icon","state","size","ModalNote","stateVal","COLORS","correct_500","warning_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,QAAMI,SAA8C,WAA9CA,SAA8C,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAmBF,IAAAA,KAAK,GAAC;AAAzB,GAAD,KAAyC;AACnG,UAAMG,QAAQ,GAAGH,KAAK,CAAtB,WAAiBA,EAAjB;;AAEA,YAAA,QAAA;AACI,WAAA,UAAA;AAAiB,eAAA,aACb,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEC;AAAzC,SAAA,EACKF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEK,SAAOC;AAA7B,SAAA,CADnB,EAAA,aAEI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHS,IAGT,CAFJ,CADa;;AAOjB,WAAA,SAAA;AAAgB,eAAA,aACZ,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEJ;AAAzC,SAAA,EACKF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,SAAA,CADnB,EAAA,aAEI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHQ,IAGR,CAFJ,CADY;;AAOhB,WAAA,UAAA;AAAiB,eAAA,aACb,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEL;AAAzC,SAAA,EACKF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,SAAA,CADnB,EAAA,aAEI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHS,IAGT,CAFJ,CADa;;AAOjB;AAAS,eAAA,aACL,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEL;AAAzC,SAAA,EACKF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,UAAA,KAAK,EAAEK,SAApB,WAAA;AAAwC,UAAA,SAAS,EAAEH;AAAnD,SAAA,CADnB,EAAA,aAEI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHC,IAGD,CAFJ,CADK;AAtBb;AAHG,GAAA;;;AANHH,IAAAA,I;AACAC,IAAAA,I;AACAC,IAAAA,K;AACAC,IAAAA,I;;oBAuCJ,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport {ModalNoteSection} from './ModalStyles'\n\ninterface NoteProps {\n    note: string;\n    icon?: React.ReactNode;\n    state?: string;\n    size?: string;\n}\n\nexport const ModalNote : React.FunctionComponent<NoteProps> = ({note, icon, size, state='neutral'}) => {   \n    const stateVal = state.toLowerCase();\n\n    switch(stateVal) {\n        case 'positive': return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <CheckComplete color={COLORS.correct_500}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n            );\n\n        case 'warning': return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <TechnicalWarning color={COLORS.warning_500}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n        );\n\n        case 'critical': return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <TechnicalWarning color={COLORS.warning_500}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n            );\n\n        default: return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <Information color={COLORS.primary_500} className={size}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n        );\n    }\n    \n   \n};\n\nexport default ModalNote;"],"file":"ModalNote.js"}
+{"version":3,"sources":["../../../src/Modals/ModalNote.tsx"],"names":["note","icon","state","size","ModalNote","stateVal","COLORS","correct_500","warning_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,QAAMI,SAA6C,WAA7CA,SAA6C,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAoBF,IAAAA,KAAK,GAAG;AAA5B,GAAD,KAA6C;AACxG,UAAMG,QAAQ,GAAGH,KAAK,CAAtB,WAAiBA,EAAjB;;AAEA,YAAA,QAAA;AACE,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEC;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEK,SAAOC;AAA7B,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;;AAOF,WAAA,SAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEJ;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;;AAOF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEL;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;;AAOF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEL;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,UAAA,KAAK,EAAEK,SAApB,WAAA;AAAwC,UAAA,SAAS,EAAEH;AAAnD,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;AA1BJ;AAHK,GAAA;;;AANLH,IAAAA,I;AACAC,IAAAA,I;AACAC,IAAAA,K;AACAC,IAAAA,I;;oBAyCF,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckComplete color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.js"}

package/dist/umd/Table/Table.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../icons/systemicons/SystemIcons", "../icons/index", "../Dropdown/index", "../Button/index", "../types", "../styles", "./TableStyles", "../LoadingIndicator"], factory);
+    define(["exports", "react", "../types", "./TableStyles", "../LoadingIndicator", "./TableHeaders", "./TableFooter", "./TableBody"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../icons/systemicons/SystemIcons"), require("../icons/index"), require("../Dropdown/index"), require("../Button/index"), require("../types"), require("../styles"), require("./TableStyles"), require("../LoadingIndicator"));
+    factory(exports, require("react"), require("../types"), require("./TableStyles"), require("../LoadingIndicator"), require("./TableHeaders"), require("./TableFooter"), require("./TableBody"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.SystemIcons, global.index, global.index, global.index, global.types, global.styles, global.TableStyles, global.LoadingIndicator);
+    factory(mod.exports, global.react, global.types, global.TableStyles, global.LoadingIndicator, global.TableHeaders, global.TableFooter, global.TableBody);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _SystemIcons, _index, _index2, _index3, _types, _styles, _TableStyles, _LoadingIndicator) {
+})(this, function (exports, _react, _types, _TableStyles, _LoadingIndicator, _TableHeaders, _TableFooter, _TableBody) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -19,6 +19,18 @@
 
   var React = _interopRequireWildcard(_react);
 
+  var _TableHeaders2 = _interopRequireDefault(_TableHeaders);
+
+  var _TableFooter2 = _interopRequireDefault(_TableFooter);
+
+  var _TableBody2 = _interopRequireDefault(_TableBody);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -69,37 +81,47 @@
     return newObj;
   }
 
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
   /**
    * Import React libraries.
    */
 
-  /**
-   * Import custom components.
-   */
 
-  /**
-   * Import custom styles.
-   */
+  const Table = props => {
+    let {
+      onPreviousPageClick,
+      onNextPageClick,
+      onRowsPerPageChange,
+      onTriggerSortingChange,
+      columns,
+      rows,
+      remoteOperations,
+      pagination,
+      showLoadingIndicator,
+      selectable,
+      multiSelect,
+      keyExpr,
+      accordion,
+      collapsed = true,
+      collapsedRows
+    } = props; // States used within the component
 
-  /**
-   * Import custom types.
-   */
-  const Table = ({
-    rowClick,
-    linkClick,
-    iconClick,
-    previousPageClick,
-    nextPageClick,
-    rowsPerPageChange,
-    triggerSortingChange,
-    title,
-    columns,
-    rows,
-    remotePagination,
-    pagination,
-    showLoadingIndicator
-  }) => {
-    // States used within the component
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
     const [filteredRows, setFilteredRows] = React.useState([]);
     const [currentPageRows, setCurrentPageRows] = React.useState([]);
@@ -109,13 +131,30 @@
     const [from, setFrom] = React.useState();
     const [to, setTo] = React.useState();
     const [total, setTotal] = React.useState();
+    const [isCollapsed, setIsCollapsed] = React.useState(true);
+    const [selectAllState, setSelectAllState] = React.useState('none');
+    const [selected, setSelected] = React.useState(multiSelect ? [] : undefined);
+    React.useEffect(() => {
+      setSelected(props.selectedRows || (multiSelect ? [] : undefined));
+    }, [props.selectedRows, multiSelect]);
+    /**
+     * update select all checkbox state
+     */
+
+    React.useEffect(() => {
+      if (multiSelect) {
+        const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
+        const count = selected.filter(item => currentList.includes(item)).length;
+        setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
+      }
+    }, [currentPageRows, multiSelect, selected, keyExpr]);
     /**
      * Takes care of local pagination.
      * Works only in case remote pagination is not defined or is set to false.
      */
 
     React.useEffect(() => {
-      if (!remotePagination) {
+      if (!remoteOperations) {
         // Let's retrieve temporary filtered rows and update globally filtered rows
         const tmpFilteredRows = filterAndSortRows();
         setFilteredRows(tmpFilteredRows);
@@ -129,14 +168,14 @@
 
         setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
       }
-    }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);
+    }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);
     /**
      * Takes care of remote pagination.
      * Works only in case remote pagination is set to true.
      */
 
     React.useEffect(() => {
-      if (remotePagination) {
+      if (remoteOperations) {
         setCurrentPageRows(rows); // Let's assign pagination values
 
         setFrom(pagination?.from);
@@ -145,7 +184,19 @@
         setCurrentPage(pagination?.currentPage);
         setRowsPerPage(pagination?.rowsPerPage);
       }
-    }, [remotePagination, pagination, rows]);
+    }, [remoteOperations, pagination, rows]);
+    /**
+     * Sets number of rows to display when accordion.
+     */
+
+    React.useEffect(() => {
+      if (!accordion) return;
+      setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
+    }, [rows, accordion, collapsedRows, isCollapsed]);
+    React.useEffect(() => {
+      if (!accordion) return;
+      setIsCollapsed(!!collapsed);
+    }, [accordion, collapsed]);
     /**
      * Filters out a rows by specific column filters and sorts them if any sorting is set.
      * @returns Filtered and sorted rows.
@@ -214,8 +265,8 @@
               setSortedColumn(column.key);
               setSortedDirection('desc'); // Let's trigger remote sorting trigger function
 
-              if (remotePagination && triggerSortingChange) {
-                triggerSortingChange(column.key, 'desc');
+              if (remoteOperations && onTriggerSortingChange) {
+                onTriggerSortingChange(column.key, 'desc');
               }
             } else {
               tmpColumn.sortingDirection = 'asc'; // Update sorted column and direction
@@ -223,8 +274,8 @@
               setSortedColumn(column.key);
               setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-              if (remotePagination && triggerSortingChange) {
-                triggerSortingChange(column.key, 'asc');
+              if (remoteOperations && onTriggerSortingChange) {
+                onTriggerSortingChange(column.key, 'asc');
               }
             }
           } else {
@@ -234,8 +285,8 @@
             setSortedColumn(column.key);
             setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-            if (remotePagination && triggerSortingChange) {
-              triggerSortingChange(column.key, 'asc');
+            if (remoteOperations && onTriggerSortingChange) {
+              onTriggerSortingChange(column.key, 'asc');
             }
           }
         } else if (tmpColumn.sortingDirection !== undefined) {
@@ -252,10 +303,10 @@
 
 
     const previousPage = () => {
-      if (remotePagination) {
+      if (remoteOperations) {
         // Let's inform parent component about page change
-        if (previousPageClick) {
-          previousPageClick();
+        if (onPreviousPageClick) {
+          onPreviousPageClick();
         }
       } else {
         // Let's change the page within the component
@@ -268,10 +319,10 @@
 
 
     const nextPage = () => {
-      if (remotePagination) {
+      if (remoteOperations) {
         // Let's inform parent component about page change
-        if (nextPageClick) {
-          nextPageClick();
+        if (onNextPageClick) {
+          onNextPageClick();
         }
       } else {
         // Let's change the page within the component
@@ -286,10 +337,10 @@
 
     const changeRowsPerPage = value => {
       // Let's check if we are using remote pagination
-      if (remotePagination) {
+      if (remoteOperations) {
         // Inform parent component about rows per page change
-        if (rowsPerPageChange) {
-          rowsPerPageChange(parseInt(value));
+        if (onRowsPerPageChange) {
+          onRowsPerPageChange(value);
         }
       } else {
         // Let's reset current page to 1
@@ -297,172 +348,90 @@
       } // Let's set rows per page
 
 
-      setRowsPerPage(parseInt(value));
-    };
-    /**
-     * Renders the table header.
-     */
-
-
-    const renderHeader = () => {
-      return /*#__PURE__*/React.createElement("thead", null, title && /*#__PURE__*/React.createElement("tr", {
-        "data-testid": "TestTableHeaderRow"
-      }, /*#__PURE__*/React.createElement(_TableStyles.TableHeaderRowCol, {
-        colSpan: columns.length
-      }, /*#__PURE__*/React.createElement("div", null, title, /*#__PURE__*/React.createElement(_SystemIcons.MoreVertical, {
-        size: "18px",
-        color: _styles.COLORS.neutral_600
-      })))), /*#__PURE__*/React.createElement("tr", {
-        "data-testid": "TestTableColumnHeaderRow"
-      }, columns.map(column => /*#__PURE__*/React.createElement(_TableStyles.TableColumnHeaderCol, {
-        onClick: () => sortTableColumn(column),
-        key: column.key,
-        style: {
-          width: column.width
-        },
-        className: `${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`
-      }, column.name, column.sortingDirection === 'asc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineUp, {
-        size: "20px"
-      }) : column.sortingDirection === 'desc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineDown, {
-        size: "20px"
-      }) : ''))));
+      setRowsPerPage(value);
     };
     /**
-     * Function which is called when a mouse click happens on a link to pass data to the parent component.
+     * Function which is called when a mouse click happens on a row to pass data to the parent component.
      * @param row - Row in which the link is located.
-     * @param key - Key of the column for which the link is set.
-     * @param event - Click event handler.
      */
 
 
-    const onLinkClick = (row, key, event) => {
-      if (linkClick) {
-        event.stopPropagation();
-        linkClick(row, key);
-      }
-    };
-    /**
-     * Function which is called when a mouse click happens on an icon to pass data to the parent component.
-     * @param row - Row in which the icon is located.
-     * @param key - Key of the column for which the icon is set.
-     * @param event - Click event handler.
-     */
+    const onRowClick = row => {
+      const selectedText = window?.getSelection()?.toString();
 
+      if (selectedText?.length === 0 && selectable) {
+        const value = keyExpr ? row[keyExpr] : row;
+        let currentSelection = value;
 
-    const onIconClick = (row, key, event) => {
-      if (iconClick) {
-        event.stopPropagation();
-        iconClick(row, key);
-      }
-    };
-    /**
-     * Function which is called when a mouse click happens on a row to pass data to the parent component.
-     * @param row - Row in which the link is located.
-     */
-
+        if (!!multiSelect) {
+          const existing = selected?.indexOf(value);
 
-    const onRowClick = row => {
-      const selectedText = window?.getSelection()?.toString(); // Let's trigger row click only if we haven't selected any text and action exists
+          if (existing > -1) {
+            currentSelection = [...selected];
+            currentSelection.splice(existing, 1);
+          } else {
+            currentSelection = [...selected, currentSelection];
+          }
+        }
 
-      if (selectedText?.length === 0 && rowClick) {
-        rowClick(row);
+        setSelected(currentSelection);
+        props.onSelectionChange && props.onSelectionChange(currentSelection);
       }
     };
     /**
-     * Renders the table body.
+     * Function which is called when user clicks checkbox to select or deselect all rows.
      */
 
 
-    const renderBody = () => {
-      return /*#__PURE__*/React.createElement("tbody", null, currentPageRows.length > 0 ? currentPageRows.map((row, index) => /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
-        key: `row_${index}`,
-        onClick: () => onRowClick(row),
-        "data-testid": "TestTableDataRow"
-      }, columns.map(column => /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
-        key: `row_${index}_${column.key}`,
-        style: column.colorFn ? {
-          color: column.colorFn(row, column.key),
-          maxWidth: column.width
-        } : {
-          maxWidth: column.width
-        },
-        className: `${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `,
-        title: column.shortenText && row[column.key]
-      }, column.isLink && row[column.key] ? /*#__PURE__*/React.createElement(_index3.Button, {
-        size: _types.Size.Small,
-        variant: "tertiary",
-        onClick: event => onLinkClick(row, column.key, event),
-        style: column.colorFn && {
-          color: column.colorFn(row, column.key)
-        }
-      }, row[column.key]) : column.isIcon && column.icon ? /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        action: event => onIconClick(row, column.key, event)
-      }, _index.SystemIcons[column.icon]({
-        size: '24',
-        className: 'icon'
-      })) : column.customContent ? column.customContent(row, column.key) : row[column.key])))) : /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
-        className: "no-rows",
-        "data-testid": "TestTableNoDataRow"
-      }, /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
-        colSpan: columns.length,
-        className: "center"
-      }, "There are no rows to display")));
-    };
-    /**
-     * Renders the table footer.
-     */
+    const onSelectAllClick = () => {
+      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
+
+      switch (selectAllState) {
+        case 'all':
+          setSelected([...selected].filter(item => !currentList.includes(item)));
+          setSelectAllState('none');
+          break;
 
+        case 'none':
+          setSelected([...selected, ...currentList]);
+          setSelectAllState('all');
+          break;
 
-    const renderFooter = () => {
-      // Define local values used within the footer
-      const rowsPerPageValues = ['10', '20', '50', '100'];
-      return /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(_TableStyles.TableFooterCol, {
-        colSpan: columns.length,
-        "data-testid": "TestTableFooterRow"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Rows per page: "), /*#__PURE__*/React.createElement(_index2.DropdownFilter, {
-        id: "rows-per-page",
-        list: rowsPerPageValues.map(x => ({
-          label: x
-        })),
-        disableSorting: true,
-        onSelect: value => changeRowsPerPage(value),
-        initalValue: rowsPerPage.toString(),
-        isButton: true
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "current-page-info"
-      }, total === 0 ? 0 : from, "-", to, " of ", total), /*#__PURE__*/React.createElement("div", {
-        className: "controls"
-      }, /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => previousPage(),
-        disabled: from === 1
-      }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, {
-        size: "24",
-        color: _styles.COLORS.neutral_600
-      })), /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => nextPage(),
-        disabled: to === total
-      }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-        size: "24",
-        color: _styles.COLORS.neutral_600
-      })))))));
+        case 'some':
+          setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);
+          setSelectAllState('all');
+          break;
+      }
     };
     /**
      * Return Table component.
      */
 
 
-    return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement(_TableStyles.TableContainer, {
+    return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement(_TableStyles.StyledTable, {
       cellPadding: "0",
       cellSpacing: "0",
-      "data-testid": "TestTable"
-    }, renderHeader(), renderBody(), renderFooter()), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.TableLoadingIndicator, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
+      "data-testid": "TestTable",
+      className: 'table'
+    }, /*#__PURE__*/React.createElement(_TableHeaders2.default, _extends({}, props, {
+      sortByColumn: sortTableColumn,
+      onSelectAllClick: onSelectAllClick,
+      selectAllState: selectAllState
+    })), /*#__PURE__*/React.createElement(_TableBody2.default, _extends({}, props, {
+      currentPageRows: currentPageRows,
+      selected: selected,
+      onRowClick: onRowClick
+    })), /*#__PURE__*/React.createElement(_TableFooter2.default, _extends({}, props, {
+      onRowsPerPageChange: changeRowsPerPage,
+      rowsPerPage: rowsPerPage,
+      setIsCollapsed: setIsCollapsed,
+      isCollapsed: isCollapsed,
+      from: from,
+      to: to,
+      total: total,
+      nextPage: nextPage,
+      prevPage: previousPage
+    }))), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.StyledTableSpinner, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
       size: _types.Size.Medium,
       color: "#ffffff"
     })));