@laerdal/life-react-components 1.3.2-dev.1.full → 1.3.2-dev.11

package/dist/esm/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {Size} from '../types';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ type?: string }>`\n  display: contents;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter $color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/esm/Button/Iconbutton.js

@@ -180,7 +180,6 @@ const StyledSecondaryIconButton = styled(StyledIconButton)`
 
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
 `;
-;
 const IconButton = /*#__PURE__*/React.forwardRef(({
   id,
   variant,

package/dist/esm/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","forwardRef","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","ref","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","forwardRef","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","ref","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/esm/Dropdown/ChipDropdownInput.js

@@ -264,10 +264,10 @@ const ChipDropdownInput = ({
   };
 
   React.useEffect(() => {
-    var options = [...givenList];
+    let options = [...givenList];
 
     if (!restartFilter && value !== '') {
-      options = options.filter(option => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1);
+      options = options.filter(option => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 || option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1);
     }
 
     if (!disableSorting) {

package/dist/esm/Dropdown/ChipDropdownInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["React","styled","InputChip","Search","TechnicalWarning","WarningMessage","ErrorMessage","COLORS","ChipInputContainer","Size","DropdownButton","DropdownContent","LoadingIndicator","ComponentMStyling","ComponentTextStyle","Wrapper","div","StyledChipInputContainer","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","Regular","black","StyledDropdownButton","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","givenList","setGivenList","useState","chips","setChips","value","setValue","dropdownIsOpen","setDropdownIsOpen","currentSearchResult","setCurrentSearchResult","restartFilter","setRestartFilter","focused","setFocused","chipInput","useRef","styledFieldRef","useEffect","newList","map","e","label","addChip","newChip","current","onAddChip","event","keyCode","find","preventDefault","onRemoveChip","length","index","elementToAdd","newChips","splice","onEditChip","text","options","filter","option","toUpperCase","indexOf","sort","o","includes","handleValueUpdate","focus","handleKeyPress","contains","target","matches","c","toLowerCase","handleClickOutside","document","addEventListener","removeEventListener","dropdownItems","x","displayLabel","noteLabel","secondaryLabel","stopPropagation","chip","l","undefined","Medium","Small","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","critical_500","isButton","autofilledMessage"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from '../Chips/index';\nimport { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer } from '../Chips/ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { Size } from '../types';\nimport { ChipInputProps } from '../Chips/ChipTypes';\nimport { DropdownButton } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-width: 344px;\n`;\n\nconst StyledChipInputContainer = styled(ChipInputContainer)`\n  padding: 2px 2px 2px 48px !important;\n  min-height: 56px;\n  max-height: 176px;\n  overflow-y: auto;\n  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};\n\n  .medium {\n    margin-right: 8px !important;\n  }\n  .SearchIcon {\n    position: absolute;\n    left: 18px;\n    top: 18px;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n  }\n\n  &.invalid {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  }\n  &.alreadyInOrganization {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  }\n\n  &.empty:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n  }\n\n  &.inputHasFocus {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_700};\n    cursor: pointer;\n  }\n`;\n\nconst ChipInput = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin: 4px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n  background-color: inherit;\n`;\n\nconst StyledDropdownButton = styled(DropdownButton)`\n  display: flex;\n  width: 98%;\n  margin-left: 3px;\n  svg {\n    margin: auto 0 auto 0;\n  }\n`;\n\nconst Loading = styled.div`\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n`;\n\ninterface List {\n  label: string;\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: List[] | string[];\n  onInputChange?: (input: string) => void;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  isButton?: boolean;\n  autofilledMessage?: string;\n  suggestion?: List;\n  excludeIcon?: boolean;\n  loading?: boolean;\n  maxSelectedItems?: number;\n}\n\nconst ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n  list,\n  onInputChange,\n  disableSorting,\n  messageOnNoResults,\n  values,\n  inputId,\n  variants,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n  suggestion,\n  excludeIcon,\n  loading,\n  maxSelectedItems,\n}: ChipDropdownInputProps) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<List[]>([]);\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [currentSearchResult, setCurrentSearchResult] = React.useState<List[]>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  // Initiate refs\n  const chipInput = React.useRef<any>();\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: List[] = (list as string[]).map((e: string) => ({ label: e, value: e }));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as List[]);\n    }\n  }, [list]);\n\n  const addChip = (newChip: string) => {\n    // Let's add the chip\n    setChips([...chips, newChip]);\n    onValueChange([...chips, newChip]);\n\n    // Let's clear the old value\n    chipInput.current.value = '';\n    setValue('');\n  };\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      if (!givenList.find((e) => e.value === value)) {\n        setValue('');\n        return;\n      }\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      addChip(value);\n    }\n    if (event.keyCode === 8 && value === '') {\n      onRemoveChip(chips.length - 1);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.current.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.current.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.current.value = text;\n    setValue(text);\n  };\n\n  React.useEffect(() => {\n    var options = [...givenList];\n    if (!restartFilter && value !== '') {\n      options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1);\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    options = options.filter((o) => !chips.includes(o.value));\n    setCurrentSearchResult(options);\n  }, [value, givenList, chips]);\n\n  const handleValueUpdate = (values: string[]) => {\n    setRestartFilter(true);\n    addChip(values[0]);\n    chipInput?.current?.focus();\n  }\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        const matches = currentSearchResult?.filter((c) => c.value.toLowerCase() === value.toLowerCase());\n        if (matches?.length === 1 /*&& onSelect*/) {\n          addChip(matches[0].value);\n          //onSelect(chips);\n        } else if (e.target.value === suggestion?.label) {\n          addChip(e.target.value);\n        }\n\n        setDropdownIsOpen(!dropdownIsOpen);\n        if (matches?.length === 0) {\n          setValue('');\n        }\n      } else if (e.keyCode === 40) {\n        setDropdownIsOpen(!dropdownIsOpen);\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Return Chip Input component.\n   */\n\n  let dropdownItems: DropdownItem[] = [];\n  if(currentSearchResult)\n    dropdownItems = currentSearchResult.map(x => ({ value: x.value, displayLabel: x.label, noteLabel: x.secondaryLabel }));\n  \n  if(suggestion && !chips.includes(suggestion.value))\n    dropdownItems = [{ value: suggestion.value, displayLabel: suggestion.label, noteLabel: suggestion.secondaryLabel, suggestion: true }, ...dropdownItems];\n\n  return (\n    <Wrapper>\n      <StyledChipInputContainer\n        id={inputId}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setDropdownIsOpen(true);\n          chipInput.current.focus();\n        }}\n        className={validationType}\n        ref={styledFieldRef}>\n        <Search size=\"24px\" className=\"SearchIcon\" />\n        {chips?.map((chip: string, index: number) => (\n          <InputChip\n            icon={givenList.find((l: List) => l.value === chip) ? 'User' : undefined}\n            size={Size.Medium}\n            variant={variants && variants?.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n\n        <ChipInput\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n            setValue(event.target.value);\n            setRestartFilter(false);\n            setDropdownIsOpen(true);\n            if (onInputChange) {\n              onInputChange(event.target.value || '');\n            }\n          }}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips?.length === 0 ? placeholder : ''}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            setDropdownIsOpen(true);\n          }}\n          onFocus={() => {\n            setDropdownIsOpen(true);\n          }}\n          ref={chipInput}\n        />\n        {loading ? (\n          <Loading>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </Loading>\n        ) : null}\n      </StyledChipInputContainer>\n      {(!maxSelectedItems || (maxSelectedItems && chips.length < maxSelectedItems)) && (\n        <DropdownContent \n          customizationProps={{\n            action: () => {},\n            pinTopItem: true,\n            \n            itemsType: 'normal',\n            scrollable: true,\n            actionLabel: '',\n            multiSelect: false,\n            onValueUpdate: handleValueUpdate,\n            items: dropdownItems\n          }}\n          focused={focused}\n          setFocused={setFocused}\n          hideOnClickOutside={false}\n          selectedValues={[]}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          setSelectedValues={() => {}}\n          isOpen={dropdownIsOpen}\n          setIsOpen={setDropdownIsOpen}\n          filter={''}\n          isButton={false} \n          id={`${inputId}_dropdowncontent`} />\n      )}\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n};\n\nexport default ChipDropdownInput;\n"],"file":"ChipDropdownInput.js"}
+{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["React","styled","InputChip","Search","TechnicalWarning","WarningMessage","ErrorMessage","COLORS","ChipInputContainer","Size","DropdownButton","DropdownContent","LoadingIndicator","ComponentMStyling","ComponentTextStyle","Wrapper","div","StyledChipInputContainer","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","Regular","black","StyledDropdownButton","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","givenList","setGivenList","useState","chips","setChips","value","setValue","dropdownIsOpen","setDropdownIsOpen","currentSearchResult","setCurrentSearchResult","restartFilter","setRestartFilter","focused","setFocused","chipInput","useRef","styledFieldRef","useEffect","newList","map","e","label","addChip","newChip","current","onAddChip","event","keyCode","find","preventDefault","onRemoveChip","length","index","elementToAdd","newChips","splice","onEditChip","text","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","o","includes","handleValueUpdate","focus","handleKeyPress","contains","target","matches","c","toLowerCase","handleClickOutside","document","addEventListener","removeEventListener","dropdownItems","x","displayLabel","noteLabel","stopPropagation","chip","l","undefined","Medium","Small","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","critical_500","isButton","autofilledMessage"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from '../Chips/index';\nimport { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer } from '../Chips/ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { Size } from '../types';\nimport { ChipInputProps } from '../Chips/ChipTypes';\nimport { DropdownButton } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-width: 344px;\n`;\n\nconst StyledChipInputContainer = styled(ChipInputContainer)`\n  padding: 2px 2px 2px 48px !important;\n  min-height: 56px;\n  max-height: 176px;\n  overflow-y: auto;\n  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};\n\n  .medium {\n    margin-right: 8px !important;\n  }\n  .SearchIcon {\n    position: absolute;\n    left: 18px;\n    top: 18px;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n  }\n\n  &.invalid {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  }\n  &.alreadyInOrganization {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  }\n\n  &.empty:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n  }\n\n  &.inputHasFocus {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_700};\n    cursor: pointer;\n  }\n`;\n\nconst ChipInput = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin: 4px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n  background-color: inherit;\n`;\n\nconst StyledDropdownButton = styled(DropdownButton)`\n  display: flex;\n  width: 98%;\n  margin-left: 3px;\n  svg {\n    margin: auto 0 auto 0;\n  }\n`;\n\nconst Loading = styled.div`\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n`;\n\ninterface List {\n  label: string;\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: List[] | string[];\n  onInputChange?: (input: string) => void;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  isButton?: boolean;\n  autofilledMessage?: string;\n  suggestion?: List;\n  excludeIcon?: boolean;\n  loading?: boolean;\n  maxSelectedItems?: number;\n}\n\nconst ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n  list,\n  onInputChange,\n  disableSorting,\n  messageOnNoResults,\n  values,\n  inputId,\n  variants,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n  suggestion,\n  excludeIcon,\n  loading,\n  maxSelectedItems,\n}: ChipDropdownInputProps) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<List[]>([]);\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [currentSearchResult, setCurrentSearchResult] = React.useState<List[]>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  // Initiate refs\n  const chipInput = React.useRef<any>();\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: List[] = (list as string[]).map((e: string) => ({ label: e, value: e }));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as List[]);\n    }\n  }, [list]);\n\n  const addChip = (newChip: string) => {\n    // Let's add the chip\n    setChips([...chips, newChip]);\n    onValueChange([...chips, newChip]);\n\n    // Let's clear the old value\n    chipInput.current.value = '';\n    setValue('');\n  };\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      if (!givenList.find((e) => e.value === value)) {\n        setValue('');\n        return;\n      }\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      addChip(value);\n    }\n    if (event.keyCode === 8 && value === '') {\n      onRemoveChip(chips.length - 1);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.current.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.current.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.current.value = text;\n    setValue(text);\n  };\n\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!restartFilter && value !== '') {\n      options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n        (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    options = options.filter((o) => !chips.includes(o.value));\n    setCurrentSearchResult(options);\n  }, [value, givenList, chips]);\n\n  const handleValueUpdate = (values: string[]) => {\n    setRestartFilter(true);\n    addChip(values[0]);\n    chipInput?.current?.focus();\n  }\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        const matches = currentSearchResult?.filter((c) => c.value.toLowerCase() === value.toLowerCase());\n        if (matches?.length === 1 /*&& onSelect*/) {\n          addChip(matches[0].value);\n          //onSelect(chips);\n        } else if (e.target.value === suggestion?.label) {\n          addChip(e.target.value);\n        }\n\n        setDropdownIsOpen(!dropdownIsOpen);\n        if (matches?.length === 0) {\n          setValue('');\n        }\n      } else if (e.keyCode === 40) {\n        setDropdownIsOpen(!dropdownIsOpen);\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Return Chip Input component.\n   */\n\n  let dropdownItems: DropdownItem[] = [];\n  if(currentSearchResult)\n    dropdownItems = currentSearchResult.map(x => ({ value: x.value, displayLabel: x.label, noteLabel: x.secondaryLabel }));\n  \n  if(suggestion && !chips.includes(suggestion.value))\n    dropdownItems = [{ value: suggestion.value, displayLabel: suggestion.label, noteLabel: suggestion.secondaryLabel, suggestion: true }, ...dropdownItems];\n\n  return (\n    <Wrapper>\n      <StyledChipInputContainer\n        id={inputId}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setDropdownIsOpen(true);\n          chipInput.current.focus();\n        }}\n        className={validationType}\n        ref={styledFieldRef}>\n        <Search size=\"24px\" className=\"SearchIcon\" />\n        {chips?.map((chip: string, index: number) => (\n          <InputChip\n            icon={givenList.find((l: List) => l.value === chip) ? 'User' : undefined}\n            size={Size.Medium}\n            variant={variants && variants?.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n\n        <ChipInput\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n            setValue(event.target.value);\n            setRestartFilter(false);\n            setDropdownIsOpen(true);\n            if (onInputChange) {\n              onInputChange(event.target.value || '');\n            }\n          }}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips?.length === 0 ? placeholder : ''}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            setDropdownIsOpen(true);\n          }}\n          onFocus={() => {\n            setDropdownIsOpen(true);\n          }}\n          ref={chipInput}\n        />\n        {loading ? (\n          <Loading>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </Loading>\n        ) : null}\n      </StyledChipInputContainer>\n      {(!maxSelectedItems || (maxSelectedItems && chips.length < maxSelectedItems)) && (\n        <DropdownContent \n          customizationProps={{\n            action: () => {},\n            pinTopItem: true,\n            \n            itemsType: 'normal',\n            scrollable: true,\n            actionLabel: '',\n            multiSelect: false,\n            onValueUpdate: handleValueUpdate,\n            items: dropdownItems\n          }}\n          focused={focused}\n          setFocused={setFocused}\n          hideOnClickOutside={false}\n          selectedValues={[]}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          setSelectedValues={() => {}}\n          isOpen={dropdownIsOpen}\n          setIsOpen={setDropdownIsOpen}\n          filter={''}\n          isButton={false} \n          id={`${inputId}_dropdowncontent`} />\n      )}\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n};\n\nexport default ChipDropdownInput;\n"],"file":"ChipDropdownInput.js"}

package/dist/esm/Dropdown/CommonStyling.js

@@ -286,6 +286,10 @@ export const DropdownButtonCSS = size => {
 
       div.item-icon {
         margin-right: 6px;
+        svg {
+          display: block;
+          margin: auto;
+        }
       }
       div.item-icon-old {
         flex: 1 0 40px;

package/dist/esm/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Size","Z_INDEXES","Dropdown","div","props","isButton","minWidth","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: ${Z_INDEXES.dropdown};\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    div.item-content {\n      margin: auto 0 auto 16px;\n      display: flex;\n      align-items: center;\n\n      div.item-label {\n        flex: 1 0 calc(100% - 40px);\n      }\n\n      div.item-icon {\n        margin-right: 6px;\n      }\n      div.item-icon-old {\n        flex: 1 0 40px;\n        display: flex;\n        justify-content: flex-end;\n      }\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}
+{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Size","Z_INDEXES","Dropdown","div","props","isButton","minWidth","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: ${Z_INDEXES.dropdown};\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    div.item-content {\n      margin: auto 0 auto 16px;\n      display: flex;\n      align-items: center;\n\n      div.item-label {\n        flex: 1 0 calc(100% - 40px);\n      }\n\n      div.item-icon {\n        margin-right: 6px;\n        svg {\n          display: block;\n          margin: auto;\n        }\n      }\n      div.item-icon-old {\n        flex: 1 0 40px;\n        display: flex;\n        justify-content: flex-end;\n      }\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/esm/Dropdown/DropdownButton.js

@@ -35,7 +35,8 @@ const DropdownButton = ({
   multiSelect = false,
   scrollable = false,
   pinTopItem = false,
-  maxHeight
+  maxHeight,
+  className
 }) => {
   // Globally used variables within the view.
   const [dropdownOpen, setDropdownOpen] = React.useState(false);
@@ -89,7 +90,9 @@ const DropdownButton = ({
     }, icon);
   };
 
-  return /*#__PURE__*/React.createElement(Wrapper, null, renderIconButton(), /*#__PURE__*/React.createElement(DropdownContent, {
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    className: className
+  }, renderIconButton(), /*#__PURE__*/React.createElement(DropdownContent, {
     customizationProps: {
       itemsType: itemsType,
       action: action ?? (() => {}),

package/dist/esm/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","dropdownOpen","setDropdownOpen","useState","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyDown","e","current","contains","target","keyCode","preventDefault","click","useEffect","document","addEventListener","removeEventListener","renderIconButton","event","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyDown = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\n        if(!dropdownOpen)\n          setFocused(0);\n          \n        if(e.keyCode != 40)\n        {\n          e.preventDefault();\n          buttonRef?.current.click();\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);      \n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \n      {\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\n          if(!dropdownOpen)\n            setFocused(0);\n        }\n        setDropdownOpen(!dropdownOpen);\n      }} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","dropdownOpen","setDropdownOpen","useState","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyDown","e","current","contains","target","keyCode","preventDefault","click","useEffect","document","addEventListener","removeEventListener","renderIconButton","event","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight,\n  className }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyDown = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\n        if(!dropdownOpen)\n          setFocused(0);\n          \n        if(e.keyCode != 40)\n        {\n          e.preventDefault();\n          buttonRef?.current.click();\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);      \n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \n      {\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\n          if(!dropdownOpen)\n            setFocused(0);\n        }\n        setDropdownOpen(!dropdownOpen);\n      }} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper className={className}>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}