@laerdal/life-react-components 1.0.1-dev.30.full → 1.0.1-dev.35.full

package/dist/esm/Button/Button.js

@@ -123,9 +123,7 @@ const Primary = styled.button`
       opacity: 0;
     }
     .icon {
-      margin-left: -4px;
-      margin-top: -2px;
-      margin-bottom: -2px;
+      margin: ${props => props.size === Size.Medium ? '-2px -8px' : props.size === Size.Small ? '-2px -4px' : '-2px -8px'};
       width: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
       height: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
       svg {
@@ -135,7 +133,7 @@ const Primary = styled.button`
     }
 
     .extramargin {
-      margin-right: 9px;
+      margin-right: 4px;
     }
 
     div {
@@ -194,6 +192,13 @@ const Secondary = styled(Primary)`
       fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
     }
   }
+
+  &:focus:not(:focus-visible),
+  &:focus:not(:focus-visible) > div.button-content {
+    outline: none !important;
+    background-color: white;
+  }
+
   &:hover > div.button-content,
   &.hover-state > div.button-content {
     color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700};
@@ -235,6 +240,7 @@ const Secondary = styled(Primary)`
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
   &.focus-state {
     ${props => tabbedHereStyle('secondary', props?.colorTheme)};
+
   }
 `;
 const Tertiary = styled(Primary)`
@@ -410,7 +416,7 @@ const Text = styled.button`
 
 const Button = _ref => {
   let {
-    children = 'Primary Button',
+    children = '',
     variant = 'primary',
     type = 'button',
     size = Size.Medium,
@@ -435,7 +441,7 @@ const Button = _ref => {
 
   const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     className: (imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')
-  }, icon), /*#__PURE__*/React.createElement("span", {
+  }, icon), children && /*#__PURE__*/React.createElement("span", {
     className: loading ? 'label loading' : 'label'
   }, children), loading && /*#__PURE__*/React.createElement(LoadingIndicator, null)); // Let's render button
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["React","styled","css","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Size","getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","button","props","size","Large","Bold","Small","width","minWidth","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Text","neutral_500","Button","children","type","Medium","imageExtraMargin","testId","disabled","icon","loading","renderProps","supressFocusRef","useRef","setTabbedHere","useState","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n  switch (variant) {\n    case 'primary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n        }\n      `;\n    case 'secondary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n        }\n      `;\n    case 'tertiary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n        }\n      `;\n\n    default:\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n        }\n      `;\n  }\n};\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin-left: -4px;\n      margin-top: -2px;\n      margin-bottom: -2px;\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 9px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    box-shadow: none !important;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n      color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n      border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    }\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: white;\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    cursor: not-allowed;\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent;\n    cursor: not-allowed;\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n    cursor: not-allowed;\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n      border-color: ${COLORS.neutral_100};\n    }\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n      border-color: ${COLORS.neutral_100};\n    }\n  }\n`;\n\nconst Text = styled.button<ButtonProps>`\n  color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n\n  text-decoration: underline;\n  ${(props) =>\n    props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n  &:hover,\n  &:focus,\n  &.hover-state,\n  &.focus-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    background: transparent;\n  }\n  &:active,\n  &.active-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    background: transparent;\n  }\n  &:disabled,\n  &.disabled-state {\n    color: ${COLORS.neutral_500};\n    background: transparent;\n    cursor: not-allowed;\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  imageExtraMargin?: boolean;\n  colorTheme?: 'teal' | 'dark';\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  tabbedHere?: boolean;\n  icon?: React.ReactNode;\n  minWidth?: string;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  imageExtraMargin,\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      <span className={loading ? 'label loading' : 'label'}>{children}</span>\n      {loading && <LoadingIndicator></LoadingIndicator>}\n    </>\n  );\n\n  // Let's render button\n  switch (variant) {\n    case 'primary':\n      return (\n        <Primary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n    case 'secondary':\n      return (\n        <Secondary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Secondary>\n      );\n    case 'tertiary':\n      return (\n        <Tertiary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          flatEdge={flatEdge}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Tertiary>\n      );\n    case 'text':\n      return (\n        <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} minWidth={minWidth} data-testid={testId}>\n          {children}\n        </Text>\n      );\n    case 'correct':\n      return (\n        <Correct\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Correct>\n      );\n    case 'critical':\n      return (\n        <Critical\n          {...renderProps}\n          disabled={disabled}\n          flatEdge={flatEdge}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Critical>\n      );\n    default:\n      return (\n        <Primary\n          {...renderProps}\n          flatEdge={flatEdge}\n          disabled={disabled}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n  }\n};\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["React","styled","css","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Size","getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","button","props","size","Large","Bold","Small","width","minWidth","Medium","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Text","neutral_500","Button","children","type","imageExtraMargin","testId","disabled","icon","loading","renderProps","supressFocusRef","useRef","setTabbedHere","useState","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n  switch (variant) {\n    case 'primary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n        }\n      `;\n    case 'secondary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n        }\n      `;\n    case 'tertiary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n        }\n      `;\n\n    default:\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n        }\n      `;\n  }\n};\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? '-2px -8px' : props.size === Size.Small ? '-2px -4px' : '-2px -8px' )};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    box-shadow: none !important;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n      color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n      border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    }\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n    background-color: white;\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: white;\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    cursor: not-allowed;\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent;\n    cursor: not-allowed;\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n    cursor: not-allowed;\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n      border-color: ${COLORS.neutral_100};\n    }\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n      border-color: ${COLORS.neutral_100};\n    }\n  }\n`;\n\nconst Text = styled.button<ButtonProps>`\n  color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n\n  text-decoration: underline;\n  ${(props) =>\n    props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n  &:hover,\n  &:focus,\n  &.hover-state,\n  &.focus-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    background: transparent;\n  }\n  &:active,\n  &.active-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    background: transparent;\n  }\n  &:disabled,\n  &.disabled-state {\n    color: ${COLORS.neutral_500};\n    background: transparent;\n    cursor: not-allowed;\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  imageExtraMargin?: boolean;\n  colorTheme?: 'teal' | 'dark';\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  tabbedHere?: boolean;\n  icon?: React.ReactNode;\n  minWidth?: string;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  children = '',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  imageExtraMargin,\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n      {loading && <LoadingIndicator></LoadingIndicator>}\n    </>\n  );\n\n  // Let's render button\n  switch (variant) {\n    case 'primary':\n      return (\n        <Primary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n    case 'secondary':\n      return (\n        <Secondary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Secondary>\n      );\n    case 'tertiary':\n      return (\n        <Tertiary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          flatEdge={flatEdge}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Tertiary>\n      );\n    case 'text':\n      return (\n        <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} minWidth={minWidth} data-testid={testId}>\n          {children}\n        </Text>\n      );\n    case 'correct':\n      return (\n        <Correct\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Correct>\n      );\n    case 'critical':\n      return (\n        <Critical\n          {...renderProps}\n          disabled={disabled}\n          flatEdge={flatEdge}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Critical>\n      );\n    default:\n      return (\n        <Primary\n          {...renderProps}\n          flatEdge={flatEdge}\n          disabled={disabled}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n  }\n};\n\nexport default Button;\n"],"file":"Button.js"}

package/dist/esm/Button/DualFunctionButton.js

@@ -23,13 +23,9 @@ const ButtonsContainer = styled.div`
     margin-right: 2px;
   }
 
-  .extramargin {
-    margin-right: 9px;
-  }
-
   div.button-content {
     gap: 0px;
-    padding: ${props => props.size == Size.Large ? '4px 10px' : props.size == Size.Medium ? '4px 8px' : '4px 6px'};
+    padding: ${props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px'};
   }
 `;
 
@@ -56,8 +52,11 @@ const DualFunctionButton = _ref => {
         renderProps = _objectWithoutProperties(props, _excluded2);
 
   const [isOpen, setIsOpen] = React.useState(false);
+  const [focused, setFocused] = React.useState(null);
+  const dropdownContainerRef = React.useRef(null);
   const [selectedValues, setSelectedValues] = React.useState([]);
   return /*#__PURE__*/React.createElement(ButtonsContainer, {
+    ref: dropdownContainerRef,
     size: size
   }, /*#__PURE__*/React.createElement(Dropdown, {
     isButton: true,
@@ -82,6 +81,8 @@ const DualFunctionButton = _ref => {
     setSelectedValues: setSelectedValues,
     isButton: true,
     setIsOpen: setIsOpen,
+    focused: focused,
+    setFocused: setFocused,
     hideOnClickOutside: true,
     size: size,
     isOpen: isOpen,
@@ -102,7 +103,7 @@ const DualFunctionButton = _ref => {
       size: "16px"
     }),
     flatEdge: "left"
-  }), /*#__PURE__*/React.createElement("span", null)));
+  })));
 };
 
 DualFunctionButton.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","Size","DropdownContent","styled","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownCustomizationProps","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","selectedValues","setSelectedValues","itemsType","isButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport Button, { ButtonProps } from './Button'\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  .extramargin {\n    margin-right: 9px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${ props => props.size == Size.Large ? '4px 10px' : props.size == Size.Medium ? '4px 8px' : '4px 6px' };\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  isButton: boolean;\n  dropdownCustomizationProps: DropdownCustomizationProps;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n    return <ButtonsContainer size={size}>\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\n            <Button\n            {...renderProps}\n            onClick={onClick}\n            disabled={disabled}\n            type={type}\n            imageExtraMargin={true}\n            loading={loading}\n            icon={icon}\n            size={size}\n            width={width}\n            variant={variant}\n            flatEdge=\"right\">\n                {children}\n            </Button>\n              <DropdownContent\n                    customizationProps={dropdownCustomizationProps}\n                    filter=''\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues}\n                    setSelectedValues={setSelectedValues}\n                    isButton={true}\n                    setIsOpen={setIsOpen}\n                    hideOnClickOutside={true}\n                    size={size}\n                    isOpen={isOpen}\n                    id={id ?? 'dropdownId'}\n                    messageOnNoResults=''\n                    alignLeft={true} />\n          </Dropdown>\n          <Button variant={variant}\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          minWidth={'unset'}\n          onClick={() => setIsOpen(!isOpen)}\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\n          flatEdge=\"left\"><span/></Button>\n      </ButtonsContainer>;\n  };\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.js"}
+{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","Size","DropdownContent","styled","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownCustomizationProps","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","focused","setFocused","dropdownContainerRef","useRef","selectedValues","setSelectedValues","itemsType","isButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport Button, { ButtonProps } from './Button'\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${ props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px' };\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  isButton: boolean;\n  dropdownCustomizationProps: DropdownCustomizationProps;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n    return <ButtonsContainer ref={dropdownContainerRef} size={size}>\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\n            <Button\n            {...renderProps}\n            onClick={onClick}\n            disabled={disabled}\n            type={type}\n            imageExtraMargin={true}\n            loading={loading}\n            icon={icon}\n            size={size}\n            width={width}\n            variant={variant}\n            flatEdge=\"right\">\n                {children}\n            </Button>\n              <DropdownContent\n                    customizationProps={dropdownCustomizationProps}\n                    filter=''\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues}\n                    setSelectedValues={setSelectedValues}\n                    isButton={true}\n                    setIsOpen={setIsOpen}\n                    focused={focused}\n                    setFocused={setFocused}\n                    hideOnClickOutside={true}\n                    size={size}\n                    isOpen={isOpen}\n                    id={id ?? 'dropdownId'}\n                    messageOnNoResults=''\n                    alignLeft={true} />\n          </Dropdown>\n          <Button variant={variant}\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          minWidth={'unset'}\n          onClick={() => setIsOpen(!isOpen)}\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\n          flatEdge=\"left\" />\n      </ButtonsContainer>;\n  };\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.js"}

package/dist/esm/Dropdown/BasicDropdown.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { COLORS } from '../styles';
 import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { Dropdown, StyledField } from './CommonStyling';
+import { Dropdown, StyledField, InputField } from './CommonStyling';
 import DropdownContent from './DropdownContent';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
 import { Size } from '../types';
@@ -40,22 +40,7 @@ const BasicDropdown = ({
   const [restartFilter, setRestartFilter] = React.useState(false);
   const [focused, setFocused] = React.useState(null);
   const [selectedValues, setSelectedValues] = React.useState([]);
-  const [normalizedList, setNormalizedList] = React.useState([]);
   const styledFieldRef = React.useRef(null);
-
-  const isDropdownItem = item => {
-    return item.label !== undefined;
-  };
-
-  React.useEffect(() => {
-    if (list.length > 0) {
-      if (isDropdownItem(list[0])) {
-        setNormalizedList(list.map(i => i.label));
-      } else {
-        setNormalizedList(list.map(i => i));
-      }
-    }
-  }, [list]);
   /*
   if (!items.includes(input)) {
     setInput('');
@@ -97,9 +82,14 @@ const BasicDropdown = ({
   React.useEffect(() => {
     setIsLoading(false);
   }, [input]);
+  React.useEffect(() => {
+    if (list.every(x => x.value != input)) {
+      setInput('');
+      setPlaceholderSearch(placeholder || '');
+    }
+  }, [isOpen]);
 
   const customSetIsOpen = isOpen => {
-    console.log('dropdown content triggered');
     setIsOpen(isOpen);
   };
 
@@ -121,10 +111,23 @@ const BasicDropdown = ({
     disabled: disabled || false,
     locked: locked || false,
     showValidationMessage: !!activeValidationMessage,
+    placeholder: placeholderSearch,
     isPlaceholder: !input
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'value'
-  }, input || placeholderSearch), isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
+  }, /*#__PURE__*/React.createElement(InputField, {
+    type: "search",
+    readOnly: true,
+    placeholder: placeholderSearch,
+    value: input,
+    className: size ? `${size} value` : 'value',
+    onClick: e => {
+      if (!locked && !disabled) {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+      }
+    },
+    tabIndex: disabled || locked ? -1 : 0,
+    disabled: disabled || false
+  }), isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     size: "small",
     color: COLORS.neutral_600
   }) : null, /*#__PURE__*/React.createElement("div", {
@@ -142,15 +145,14 @@ const BasicDropdown = ({
       action: action ?? (() => {}),
       actionLabel: actionLabel,
       scrollable: scrollable,
-      isButton: isButton || false,
       onValueUpdate: handleValueSelect,
-      items: normalizedList.map(x => ({
-        value: x
-      })),
+      items: list,
       multiSelect: multiSelect,
       pinTopItem: pinTopItem,
       maxHeight: maxHeight
     },
+    focused: focused,
+    setFocused: setFocused,
     size: size == 'medium' ? Size.Medium : Size.Small,
     filter: '',
     hideOnClickOutside: true,
@@ -172,7 +174,7 @@ const BasicDropdown = ({
 
 BasicDropdown.propTypes = {
   id: _pt.string.isRequired,
-  list: _pt.oneOfType([_pt.arrayOf(_pt.string), _pt.array]).isRequired,
+  list: _pt.array.isRequired,
   itemsType: _pt.oneOf(['normal', 'checkbox', 'radio']).isRequired,
   action: _pt.func,
   actionLabel: _pt.string,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","normalizedList","setNormalizedList","styledFieldRef","useRef","isDropdownItem","item","label","undefined","useEffect","length","map","i","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","document","addEventListener","removeEventListener","customSetIsOpen","console","log","concat","neutral_600","onValueUpdate","items","x","value","Medium","Small","warning_400"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,WAArC,EAAkDC,gBAAlD,QAA0E,kCAA1E;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAAyBC,QAAzB,EAAmCC,WAAnC,QAAsD,iBAAtD;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,cAA5B,QAAkD,wBAAlD;AAEA,SAASC,IAAT,QAAqB,UAArB;AA0BA,MAAMC,eAAe,GAAG,GAAxB;AACA,MAAMC,iBAAiB,GAAG,EAA1B;;AAEA,MAAMC,aAAa,GAAG,CAAC;AACrBC,EAAAA,EADqB;AAErBC,EAAAA,IAFqB;AAGrBC,EAAAA,WAHqB;AAIrBC,EAAAA,QAJqB;AAKrBC,EAAAA,WALqB;AAMrBC,EAAAA,cANqB;AAOrBC,EAAAA,kBAPqB;AAQrBC,EAAAA,SARqB;AASrBC,EAAAA,MATqB;AAUrBC,EAAAA,WAVqB;AAWrBC,EAAAA,UAXqB;AAYrBC,EAAAA,WAZqB;AAarBC,EAAAA,UAAU,GAAG,IAbQ;AAcrBC,EAAAA,SAdqB;AAerBC,EAAAA,QAfqB;AAgBrBC,EAAAA,MAhBqB;AAiBrBC,EAAAA,QAjBqB;AAkBrBC,EAAAA,uBAlBqB;AAmBrBC,EAAAA,iBAnBqB;AAoBrBC,EAAAA,IApBqB;AAqBrBC,EAAAA,MAAM,GAAG;AArBY,CAAD,KAsBK;AACzB,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBtC,KAAK,CAACuC,QAAN,CAAwB,KAAxB,CAA5B;AACA,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BzC,KAAK,CAACuC,QAAN,CAAwB,KAAxB,CAAlC;AACA,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoB3C,KAAK,CAACuC,QAAN,CAAuB,EAAvB,CAA1B;AACA,QAAM,CAACK,iBAAD,EAAoBC,oBAApB,IAA4C7C,KAAK,CAACuC,QAAN,CAAuBrB,WAAW,IAAI,EAAtC,CAAlD;AACA,QAAM,CAAC4B,aAAD,EAAgBC,gBAAhB,IAAoC/C,KAAK,CAACuC,QAAN,CAAwB,KAAxB,CAA1C;AACA,QAAM,CAACS,OAAD,EAAUC,UAAV,IAAwBjD,KAAK,CAACuC,QAAN,CAA8B,IAA9B,CAA9B;AACA,QAAM,CAACW,cAAD,EAAiBC,iBAAjB,IAAsCnD,KAAK,CAACuC,QAAN,CAAyB,EAAzB,CAA5C;AACA,QAAM,CAACa,cAAD,EAAiBC,iBAAjB,IAAsCrD,KAAK,CAACuC,QAAN,CAAyB,EAAzB,CAA5C;AAEA,QAAMe,cAAc,GAAGtD,KAAK,CAACuD,MAAN,CAA6B,IAA7B,CAAvB;;AAEA,QAAMC,cAAc,GAAIC,IAAD,IAAiC;AACtD,WAAQA,IAAD,CAAuBC,KAAvB,KAAiCC,SAAxC;AACD,GAFD;;AAIA3D,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpB,QAAI3C,IAAI,CAAC4C,MAAL,GAAc,CAAlB,EAAqB;AACnB,UAAIL,cAAc,CAACvC,IAAI,CAAC,CAAD,CAAL,CAAlB,EAA6B;AAC3BoC,QAAAA,iBAAiB,CAAEpC,IAAD,CAAoC6C,GAApC,CAAyCC,CAAD,IAA+BA,CAAD,CAAoBL,KAA1F,CAAD,CAAjB;AACD,OAFD,MAEO;AACLL,QAAAA,iBAAiB,CAAEpC,IAAD,CAAoC6C,GAApC,CAAyCC,CAAD,IAA8BA,CAAtE,CAAD,CAAjB;AACD;AACF;AACF,GARD,EAQG,CAAC9C,IAAD,CARH;AAUA;AACF;AACA;AACA;AACA;;AAEE,QAAM+C,cAAc,GAAIC,CAAD,IAAY;AACjC,QAAIX,cAAc,EAAEY,OAAhB,IAA2BZ,cAAc,CAACY,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAA/B,EAA0E;AACxE,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AACpB/B,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD,OAFD,MAEO,IAAI4B,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AAC3B/B,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF;AACF,GARD;;AAUA,QAAMiC,iBAAiB,GAAIC,MAAD,IAAsB;AAE9CxB,IAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAJ,IAAAA,QAAQ,CAAC4B,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;AACArD,IAAAA,QAAQ,IAAIA,QAAQ,CAACoD,MAAD,CAApB,CAJ8C,CAK9C;;AACA,QAAG9C,WAAW,IAAIE,WAAlB,EACE;AAEFW,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAW,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAXD;;AAaAjD,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpB,QAAIxC,WAAJ,EAAiB;AACfuB,MAAAA,QAAQ,CAACvB,WAAD,CAAR;AACA2B,MAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACD;AACF,GALD,EAKG,CAAC3B,WAAD,CALH;AAOApB,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpBa,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsCV,cAAtC;AACA,WAAO,MAAM;AACXS,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCX,cAAzC;AACD,KAFD;AAGD,GALD;AAOAhE,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpBnB,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFD,EAEG,CAACC,KAAD,CAFH;;AAIA,QAAMkC,eAAe,GAAIvC,MAAD,IAAqB;AAC3CwC,IAAAA,OAAO,CAACC,GAAR,CAAY,4BAAZ;AACAxC,IAAAA,SAAS,CAACD,MAAD,CAAT;AACD,GAHD;;AAKA,sBACE,uDACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAEL,QAAQ,IAAI,KAAhC;AAAuC,IAAA,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAAhE;AAAoE,IAAA,MAAM,EAAEJ,MAA5E;AAAoF,IAAA,QAAQ,EAAED,QAA9F;AAAwG,IAAA,MAAM,EAAEM;AAAhH,kBACE,oBAAC,WAAD;AACE,IAAA,GAAG,EAAEkB,cADP;AAEE,IAAA,SAAS,EAAE,CAACjB,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4B0C,MAA5B,CAAmC5C,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqD4C,MAArD,CAA4D/C,QAAQ,GAAG,QAAH,GAAc,EAAlF,CAFb;AAGE,IAAA,OAAO,EAAE,MAAM;AACb,UAAI,CAACD,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxBQ,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,KAPH;AAQE,IAAA,QAAQ,EAAEP,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CARtC;AASE,IAAA,QAAQ,EAAED,QAAQ,IAAI,KATxB;AAUE,IAAA,MAAM,EAAEC,MAAM,IAAI,KAVpB;AAWE,IAAA,qBAAqB,EAAE,CAAC,CAACE,uBAX3B;AAYE,IAAA,aAAa,EAAE,CAACS;AAZlB,kBAaE;AAAK,IAAA,SAAS,EAAE;AAAhB,KAA0BA,KAAK,IAAIE,iBAAnC,CAbF,EAcGJ,SAAS,gBAAG,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,OAAvB;AAA+B,IAAA,KAAK,EAAEvC,MAAM,CAAC+E;AAA7C,IAAH,GAAkE,IAd9E,eAeE;AAAK,IAAA,OAAO,EAAE,MAAM1C,SAAS,CAAC,CAACD,MAAF,CAA7B;AAAwC,IAAA,SAAS,EAAE;AAAnD,KACGA,MAAM,gBAAG,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,SAAS,EAAEF,IAAI,GAAGA,IAAH,GAAU;AAAlD,IAAH,gBAA8D,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD,IADvE,CAfF,CADF,EAoBG,CAACJ,MAAD,IAAW,CAACD,QAAZ,iBACC,oBAAC,eAAD;AACE,IAAA,kBAAkB,EAAE;AAClBP,MAAAA,SAAS,EAAEA,SADO;AAElBC,MAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAAE,CAAb,CAFI;AAGlBC,MAAAA,WAAW,EAAEA,WAHK;AAIlBG,MAAAA,UAAU,EAAEA,UAJM;AAKlBI,MAAAA,QAAQ,EAAEA,QAAQ,IAAI,KALJ;AAMlBiD,MAAAA,aAAa,EAAEX,iBANG;AAOlBY,MAAAA,KAAK,EAAE9B,cAAc,CAACU,GAAf,CAAmBqB,CAAC,KAAK;AAAEC,QAAAA,KAAK,EAAED;AAAT,OAAL,CAApB,CAPW;AAQlBxD,MAAAA,WAAW,EAAEA,WARK;AASlBD,MAAAA,UAAU,EAAEA,UATM;AAUlBG,MAAAA,SAAS,EAAEA;AAVO,KADtB;AAaE,IAAA,IAAI,EAAEM,IAAI,IAAI,QAAR,GAAmBvB,IAAI,CAACyE,MAAxB,GAAiCzE,IAAI,CAAC0E,KAb9C;AAcE,IAAA,MAAM,EAAE,EAdV;AAeE,IAAA,kBAAkB,EAAE,IAftB;AAgBE,IAAA,MAAM,EAAEjD,MAhBV;AAiBE,IAAA,SAAS,EAAEuC,eAjBb;AAkBE,IAAA,kBAAkB,EAAEtD,kBAAkB,IAAI,EAlB5C;AAmBE,IAAA,QAAQ,EAAEU,QAAQ,IAAI,KAnBxB;AAoBE,IAAA,cAAc,EAAEkB,cApBlB;AAqBE,IAAA,iBAAiB,EAAEC,iBArBrB;AAsBE,IAAA,EAAE,EAAG,GAAEnC,EAAG;AAtBZ,IArBJ,CADF,EAgDGiB,uBAAuB,iBACtB,oBAAC,cAAD,qBACE,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAEhC,MAAM,CAACsF;AAA5C,IADF,eAEE,kCAAOtD,uBAAP,CAFF,CAjDJ,EAsDGC,iBAAiB,iBAChB,oBAAC,iBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAEjC,MAAM,CAAC+E;AAAvC,IADF,eAEE,kCAAO9C,iBAAP,CAFF,CAvDJ,CADF;AA+DD,CAnKD;;;AA1BElB,EAAAA,E;AACAC,EAAAA,I;AACAM,EAAAA,S,aAAW,Q,EAAW,U,EAAa,O;AACnCC,EAAAA,M;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,S;AACAX,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,kB;AACAQ,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AACAC,EAAAA,I,aAAO,O,EAAU,Q;AACjBC,EAAAA,M;;AA2KF,eAAerB,aAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField } from './CommonStyling';\nimport DropdownContent from './DropdownContent'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { DropdownItem } from './DropdownButtonTypes';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[] | DropdownItem[];\n  itemsType: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType,\n  action,\n  actionLabel,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [normalizedList, setNormalizedList] = React.useState<string[]>([]);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  const isDropdownItem = (item: string | DropdownItem) => {\n    return (item as DropdownItem).label !== undefined;\n  };\n\n  React.useEffect(() => {\n    if (list.length > 0) {\n      if (isDropdownItem(list[0])) {\n        setNormalizedList((list as (string | DropdownItem)[]).map((i: string | DropdownItem) => (i as DropdownItem).label));\n      } else {\n        setNormalizedList((list as (string | DropdownItem)[]).map((i: string | DropdownItem) => i as string));\n      }\n    }\n  }, [list]);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    \n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if(actionLabel || multiSelect)\n      return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    console.log('dropdown content triggered');\n    setIsOpen(isOpen);\n  }\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          isPlaceholder={!input}>\n          <div className={'value'}>{input || placeholderSearch}</div>\n          {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              scrollable: scrollable,\n              isButton: isButton || false,\n              onValueUpdate: handleValueSelect,\n              items: normalizedList.map(x => ({ value: x })),\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight\n            }}\n            size={size == 'medium' ? Size.Medium : Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","document","addEventListener","removeEventListener","every","x","value","customSetIsOpen","concat","stopPropagation","neutral_600","onValueUpdate","items","Medium","Small","warning_400"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,WAArC,EAAkDC,gBAAlD,QAA0E,kCAA1E;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAAyBC,QAAzB,EAAmCC,WAAnC,EAAgDC,UAAhD,QAAkE,iBAAlE;AACA,OAAOC,eAAP,MAA8C,mBAA9C;AACA,SAASC,iBAAT,EAA4BC,cAA5B,QAAkD,wBAAlD;AACA,SAASC,IAAT,QAAqB,UAArB;AA0BA,MAAMC,eAAe,GAAG,GAAxB;AACA,MAAMC,iBAAiB,GAAG,EAA1B;;AAEA,MAAMC,aAAa,GAAG,CAAC;AACrBC,EAAAA,EADqB;AAErBC,EAAAA,IAFqB;AAGrBC,EAAAA,WAHqB;AAIrBC,EAAAA,QAJqB;AAKrBC,EAAAA,WALqB;AAMrBC,EAAAA,cANqB;AAOrBC,EAAAA,kBAPqB;AAQrBC,EAAAA,SARqB;AASrBC,EAAAA,MATqB;AAUrBC,EAAAA,WAVqB;AAWrBC,EAAAA,UAXqB;AAYrBC,EAAAA,WAZqB;AAarBC,EAAAA,UAAU,GAAG,IAbQ;AAcrBC,EAAAA,SAdqB;AAerBC,EAAAA,QAfqB;AAgBrBC,EAAAA,MAhBqB;AAiBrBC,EAAAA,QAjBqB;AAkBrBC,EAAAA,uBAlBqB;AAmBrBC,EAAAA,iBAnBqB;AAoBrBC,EAAAA,IApBqB;AAqBrBC,EAAAA,MAAM,GAAG;AArBY,CAAD,KAsBK;AACzB,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBvC,KAAK,CAACwC,QAAN,CAAwB,KAAxB,CAA5B;AACA,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B1C,KAAK,CAACwC,QAAN,CAAwB,KAAxB,CAAlC;AACA,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoB5C,KAAK,CAACwC,QAAN,CAAuB,EAAvB,CAA1B;AACA,QAAM,CAACK,iBAAD,EAAoBC,oBAApB,IAA4C9C,KAAK,CAACwC,QAAN,CAAuBrB,WAAW,IAAI,EAAtC,CAAlD;AACA,QAAM,CAAC4B,aAAD,EAAgBC,gBAAhB,IAAoChD,KAAK,CAACwC,QAAN,CAAwB,KAAxB,CAA1C;AACA,QAAM,CAACS,OAAD,EAAUC,UAAV,IAAwBlD,KAAK,CAACwC,QAAN,CAA8B,IAA9B,CAA9B;AACA,QAAM,CAACW,cAAD,EAAiBC,iBAAjB,IAAsCpD,KAAK,CAACwC,QAAN,CAAyB,EAAzB,CAA5C;AAEA,QAAMa,cAAc,GAAGrD,KAAK,CAACsD,MAAN,CAA6B,IAA7B,CAAvB;AAEA;AACF;AACA;AACA;AACA;;AAEE,QAAMC,cAAc,GAAIC,CAAD,IAAY;AACjC,QAAIH,cAAc,EAAEI,OAAhB,IAA2BJ,cAAc,CAACI,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAA/B,EAA0E;AACxE,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AACpBrB,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD,OAFD,MAEO,IAAIkB,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AAC3BrB,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF;AACF,GARD;;AAUA,QAAMuB,iBAAiB,GAAIC,MAAD,IAAsB;AAE9Cd,IAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAJ,IAAAA,QAAQ,CAACkB,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;AACA3C,IAAAA,QAAQ,IAAIA,QAAQ,CAAC0C,MAAD,CAApB,CAJ8C,CAK9C;;AACA,QAAGpC,WAAW,IAAIE,WAAlB,EACE;AAEFW,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAW,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAXD;;AAaAlD,EAAAA,KAAK,CAACgE,SAAN,CAAgB,MAAM;AACpB,QAAI3C,WAAJ,EAAiB;AACfuB,MAAAA,QAAQ,CAACvB,WAAD,CAAR;AACA2B,MAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACD;AACF,GALD,EAKG,CAAC3B,WAAD,CALH;AAOArB,EAAAA,KAAK,CAACgE,SAAN,CAAgB,MAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsCX,cAAtC;AACA,WAAO,MAAM;AACXU,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCZ,cAAzC;AACD,KAFD;AAGD,GALD;AAOAvD,EAAAA,KAAK,CAACgE,SAAN,CAAgB,MAAM;AACpBtB,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFD,EAEG,CAACC,KAAD,CAFH;AAIA3C,EAAAA,KAAK,CAACgE,SAAN,CAAgB,MAAM;AACpB,QAAI9C,IAAI,CAACkD,KAAL,CAAWC,CAAC,IAAIA,CAAC,CAACC,KAAF,IAAW3B,KAA3B,CAAJ,EAAuC;AACrCC,MAAAA,QAAQ,CAAC,EAAD,CAAR;AACAE,MAAAA,oBAAoB,CAAC3B,WAAW,IAAI,EAAhB,CAApB;AACD;AACF,GALD,EAKG,CAACmB,MAAD,CALH;;AAOA,QAAMiC,eAAe,GAAIjC,MAAD,IAAqB;AAC3CC,IAAAA,SAAS,CAACD,MAAD,CAAT;AACD,GAFD;;AAIA,sBACE,uDACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAEL,QAAQ,IAAI,KAAhC;AAAuC,IAAA,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAAhE;AAAoE,IAAA,MAAM,EAAEJ,MAA5E;AAAoF,IAAA,QAAQ,EAAED,QAA9F;AAAwG,IAAA,MAAM,EAAEM;AAAhH,kBACE,oBAAC,WAAD;AACE,IAAA,GAAG,EAAEgB,cADP;AAEE,IAAA,SAAS,EAAE,CAACf,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4BkC,MAA5B,CAAmCpC,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqDoC,MAArD,CAA4DvC,QAAQ,GAAG,QAAH,GAAc,EAAlF,CAFb;AAGE,IAAA,OAAO,EAAE,MAAM;AACb,UAAI,CAACD,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxBQ,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,KAPH;AAQE,IAAA,QAAQ,EAAEP,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CARtC;AASE,IAAA,QAAQ,EAAED,QAAQ,IAAI,KATxB;AAUE,IAAA,MAAM,EAAEC,MAAM,IAAI,KAVpB;AAWE,IAAA,qBAAqB,EAAE,CAAC,CAACE,uBAX3B;AAYE,IAAA,WAAW,EAAEW,iBAZf;AAaE,IAAA,aAAa,EAAE,CAACF;AAblB,kBAeE,oBAAC,UAAD;AACA,IAAA,IAAI,EAAC,QADL;AAEA,IAAA,QAAQ,MAFR;AAGA,IAAA,WAAW,EAAEE,iBAHb;AAIA,IAAA,KAAK,EAAEF,KAJP;AAKA,IAAA,SAAS,EAAEP,IAAI,GAAI,GAAEA,IAAK,QAAX,GAAqB,OALpC;AAMA,IAAA,OAAO,EAAGoB,CAAD,IAAY;AACnB,UAAI,CAACxB,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxByB,QAAAA,CAAC,CAACiB,eAAF;AACAlC,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,KAXD;AAYA,IAAA,QAAQ,EAAEP,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CAZpC;AAaA,IAAA,QAAQ,EAAED,QAAQ,IAAI;AAbtB,IAfF,EA8BGU,SAAS,gBAAG,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,OAAvB;AAA+B,IAAA,KAAK,EAAExC,MAAM,CAACyE;AAA7C,IAAH,GAAkE,IA9B9E,eA+BE;AAAK,IAAA,OAAO,EAAE,MAAMnC,SAAS,CAAC,CAACD,MAAF,CAA7B;AAAwC,IAAA,SAAS,EAAE;AAAnD,KACGA,MAAM,gBAAG,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,SAAS,EAAEF,IAAI,GAAGA,IAAH,GAAU;AAAlD,IAAH,gBAA8D,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD,IADvE,CA/BF,CADF,EAuCG,CAACJ,MAAD,IAAW,CAACD,QAAZ,iBACC,oBAAC,eAAD;AACE,IAAA,kBAAkB,EAAE;AAClBP,MAAAA,SAAS,EAAEA,SADO;AAElBC,MAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAAE,CAAb,CAFI;AAGlBC,MAAAA,WAAW,EAAEA,WAHK;AAIlBG,MAAAA,UAAU,EAAEA,UAJM;AAKlB8C,MAAAA,aAAa,EAAEd,iBALG;AAMlBe,MAAAA,KAAK,EAAE1D,IANW;AAOlBU,MAAAA,WAAW,EAAEA,WAPK;AAQlBD,MAAAA,UAAU,EAAEA,UARM;AASlBG,MAAAA,SAAS,EAAEA;AATO,KADtB;AAYE,IAAA,OAAO,EAAEmB,OAZX;AAaE,IAAA,UAAU,EAAEC,UAbd;AAcE,IAAA,IAAI,EAAEd,IAAI,IAAI,QAAR,GAAmBvB,IAAI,CAACgE,MAAxB,GAAiChE,IAAI,CAACiE,KAd9C;AAeE,IAAA,MAAM,EAAE,EAfV;AAgBE,IAAA,kBAAkB,EAAE,IAhBtB;AAiBE,IAAA,MAAM,EAAExC,MAjBV;AAkBE,IAAA,SAAS,EAAEiC,eAlBb;AAmBE,IAAA,kBAAkB,EAAEhD,kBAAkB,IAAI,EAnB5C;AAoBE,IAAA,QAAQ,EAAEU,QAAQ,IAAI,KApBxB;AAqBE,IAAA,cAAc,EAAEkB,cArBlB;AAsBE,IAAA,iBAAiB,EAAEC,iBAtBrB;AAuBE,IAAA,EAAE,EAAG,GAAEnC,EAAG;AAvBZ,IAxCJ,CADF,EAoEGiB,uBAAuB,iBACtB,oBAAC,cAAD,qBACE,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAEjC,MAAM,CAAC8E;AAA5C,IADF,eAEE,kCAAO7C,uBAAP,CAFF,CArEJ,EA0EGC,iBAAiB,iBAChB,oBAAC,iBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAElC,MAAM,CAACyE;AAAvC,IADF,eAEE,kCAAOvC,iBAAP,CAFF,CA3EJ,CADF;AAmFD,CA9KD;;;AA1BElB,EAAAA,E;AACAC,EAAAA,I;AACAM,EAAAA,S,aAAW,Q,EAAW,U,EAAa,O;AACnCC,EAAAA,M;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,S;AACAX,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,kB;AACAQ,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AACAC,EAAAA,I,aAAO,O,EAAU,Q;AACjBC,EAAAA,M;;AAsLF,eAAerB,aAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType,\n  action,\n  actionLabel,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    \n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if(actionLabel || multiSelect)\n      return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    if (list.every(x => x.value != input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen])\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  }\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}>\n\n          <InputField\n          type=\"search\"\n          readOnly\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n          {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n\n\n\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size == 'medium' ? Size.Medium : Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

package/dist/esm/Dropdown/ChipDropdownInput.js

@@ -158,7 +158,8 @@ const ChipDropdownInput = ({
   const [value, setValue] = React.useState('');
   const [dropdownIsOpen, setDropdownIsOpen] = React.useState(false);
   const [currentSearchResult, setCurrentSearchResult] = React.useState();
-  const [restartFilter, setRestartFilter] = React.useState(false); // Initiate refs
+  const [restartFilter, setRestartFilter] = React.useState(false);
+  const [focused, setFocused] = React.useState(null); // Initiate refs
 
   const chipInput = React.useRef();
   const styledFieldRef = React.useRef(null);
@@ -295,12 +296,14 @@ const ChipDropdownInput = ({
           addChip(e.target.value);
         }
 
+        if (!dropdownIsOpen) setFocused(0);
         setDropdownIsOpen(!dropdownIsOpen);
 
         if (matches?.length === 0) {
           setValue('');
         }
       } else if (e.keyCode === 40) {
+        if (!dropdownIsOpen) setFocused(0);
         setDropdownIsOpen(!dropdownIsOpen);
       }
     }
@@ -390,7 +393,6 @@ const ChipDropdownInput = ({
     color: COLORS.neutral_600
   })) : null), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/React.createElement(DropdownContent, {
     customizationProps: {
-      isButton: false,
       action: () => {},
       pinTopItem: true,
       itemsType: 'normal',
@@ -400,6 +402,8 @@ const ChipDropdownInput = ({
       onValueUpdate: handleValueUpdate,
       items: dropdownItems
     },
+    focused: focused,
+    setFocused: setFocused,
     hideOnClickOutside: false,
     selectedValues: [],
     messageOnNoResults: messageOnNoResults ?? '',