@laerdal/life-react-components 1.0.1-dev.36.full → 1.0.1-dev.41.full

package/dist/esm/Button/Iconbutton.js

@@ -180,8 +180,8 @@ const StyledSecondaryIconButton = styled(StyledIconButton)`
 
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
 `;
-
-const IconButton = ({
+;
+const IconButton = /*#__PURE__*/React.forwardRef(({
   id,
   variant,
   shape,
@@ -199,7 +199,7 @@ const IconButton = ({
   onKeyPress,
   tabbedHereBackgroundColor,
   type
-}) => {
+}, ref) => {
   const supressFocusRef = React.useRef(null);
   const [tabbedHere, setTabbedHere] = React.useState(false);
 
@@ -220,6 +220,7 @@ const IconButton = ({
         id: id,
         type: type ?? 'button',
         "data-testid": id,
+        ref: ref,
         onClick: event => action(event),
         onKeyDown: e => isPressingEnter(e) ? action() : null,
         disabled: disabled,
@@ -251,6 +252,7 @@ const IconButton = ({
         type: type ?? 'button',
         "data-testid": id,
         flatEdge: flatEdge,
+        ref: ref,
         onClick: event => action(event),
         onKeyDown: e => isPressingEnter(e) ? action() : null,
         disabled: disabled,
@@ -275,8 +277,7 @@ const IconButton = ({
         tabbedHereBackgroundColor: tabbedHereBackgroundColor
       }, /*#__PURE__*/React.createElement("div", null, children));
   }
-};
-
+});
 IconButton.propTypes = {
   id: _pt.string,
   variant: _pt.oneOf(['primary', 'secondary']),
@@ -291,7 +292,8 @@ IconButton.propTypes = {
   tabIndex: _pt.number,
   borderRadius: _pt.number,
   onKeyPress: _pt.func,
-  tabbedHereBackgroundColor: _pt.string
+  tabbedHereBackgroundColor: _pt.string,
+  children: _pt.node
 };
 export default IconButton;
 //# sourceMappingURL=Iconbutton.js.map

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

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

package/dist/esm/Dropdown/BasicDropdown.js

@@ -50,8 +50,10 @@ const BasicDropdown = ({
   const handleKeyPress = e => {
     if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {
       if (e.keyCode === 13) {
+        setFocused(0);
         setIsOpen(!isOpen);
       } else if (e.keyCode === 40) {
+        setFocused(0);
         setIsOpen(!isOpen);
       }
     }
@@ -82,12 +84,6 @@ const BasicDropdown = ({
   React.useEffect(() => {
     setIsLoading(false);
   }, [input]);
-  React.useEffect(() => {
-    if (list.every(x => x.value != input)) {
-      setInput('');
-      setPlaceholderSearch(placeholder || '');
-    }
-  }, [isOpen]);
 
   const customSetIsOpen = isOpen => {
     setIsOpen(isOpen);

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","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":"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","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"}
+{"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","customSetIsOpen","concat","stopPropagation","neutral_600","onValueUpdate","items","Medium","Small","warning_400"],"mappings":"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","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        setFocused(0);\n        setIsOpen(!isOpen);\n        \n      } else if (e.keyCode === 40) {\n        setFocused(0);\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    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

@@ -41,7 +41,7 @@ const StyledChipInputContainer = styled(ChipInputContainer)`
   min-height: 56px;
   max-height: 176px;
   overflow-y: auto;
-  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_300};
+  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};
 
   .medium {
     margin-right: 8px !important;
@@ -296,14 +296,12 @@ 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);
       }
     }

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

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

package/dist/esm/Dropdown/DropdownButton.js

@@ -38,19 +38,37 @@ const DropdownButton = ({
   const [dropdownOpen, setDropdownOpen] = React.useState(false);
   const [selectedValues, setSelectedValues] = React.useState([]);
   const [focused, setFocused] = React.useState(null);
+  const buttonRef = React.useRef(null);
 
   const handleValueSelect = values => {
     // Do all required actions
     onClick(values);
   };
+
+  const handleKeyPress = e => {
+    if (buttonRef?.current && buttonRef.current.contains(e.target)) {
+      if (e.keyCode === 13) {
+        setDropdownOpen(!dropdownOpen);
+      } else if (e.keyCode === 40) {
+        setDropdownOpen(!dropdownOpen);
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('keypress', handleKeyPress);
+    return () => {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
   /**
    * Renders Icon Button dropdown menu.
    * @returns HTML View for the Icon button dropdown menu.
    */
 
-
   const renderIconButton = () => {
     return /*#__PURE__*/React.createElement(IconButton, {
+      ref: buttonRef,
       variant: "secondary",
       shape: "circular",
       action: () => setDropdownOpen(!dropdownOpen),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","dropdownOpen","setDropdownOpen","useState","selectedValues","setSelectedValues","focused","setFocused","handleValueSelect","values","renderIconButton","onValueUpdate"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AAGA,MAAMC,OAAO,GAAGD,MAAM,CAACE,GAAI;AAC3B;AACA;AACA,CAHA;;AAKA,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,KADsB;AAEtBC,EAAAA,IAFsB;AAGtBC,EAAAA,QAHsB;AAItBC,EAAAA,OAJsB;AAKtBC,EAAAA,SAAS,GAAG,QALU;AAMtBC,EAAAA,MANsB;AAOtBC,EAAAA,WAAW,GAAG,EAPQ;AAQtBC,EAAAA,KARsB;AAStBC,EAAAA,IATsB;AAUtBC,EAAAA,SAVsB;AAWtBC,EAAAA,WAAW,GAAG,KAXQ;AAYtBC,EAAAA,UAAU,GAAG,KAZS;AAatBC,EAAAA,UAAU,GAAG,KAbS;AActBC,EAAAA;AAdsB,CAAD,KAcgB;AACrC;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCtB,KAAK,CAACuB,QAAN,CAAwB,KAAxB,CAAxC;AACA,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCzB,KAAK,CAACuB,QAAN,CAAyB,EAAzB,CAA5C;AACA,QAAM,CAACG,OAAD,EAAUC,UAAV,IAAwB3B,KAAK,CAACuB,QAAN,CAA8B,IAA9B,CAA9B;;AAEA,QAAMK,iBAAiB,GAAIC,MAAD,IAAsB;AAC9C;AACAnB,IAAAA,OAAO,CAACmB,MAAD,CAAP;AACD,GAHD;AAKA;AACF;AACA;AACA;;;AACE,QAAMC,gBAAgB,GAAG,MAAM;AAC7B,wBACE,oBAAC,UAAD;AAAY,MAAA,OAAO,EAAC,WAApB;AAAgC,MAAA,KAAK,EAAC,UAAtC;AAAiD,MAAA,MAAM,EAAE,MAAMR,eAAe,CAAC,CAACD,YAAF,CAA9E;AAA+F,MAAA,QAAQ,EAAEZ;AAAzG,OACGD,IADH,CADF;AAKD,GAND;;AAQA,sBACE,oBAAC,OAAD,QACGsB,gBAAgB,EADnB,eAEE,oBAAC,eAAD;AACE,IAAA,kBAAkB,EAAE;AAClBnB,MAAAA,SAAS,EAAEA,SADO;AAElBC,MAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAAE,CAAb,CAFI;AAGlBC,MAAAA,WAAW,EAAEA,WAHK;AAIlBkB,MAAAA,aAAa,EAAEH,iBAJG;AAKlBX,MAAAA,WAAW,EAAEA,WALK;AAMlBC,MAAAA,UAAU,EAAEA,UANM;AAOlBC,MAAAA,UAAU,EAAEA,UAPM;AAQlBC,MAAAA,SAAS,EAAEA,SARO;AASlBb,MAAAA,KAAK,EAAEA;AATW,KADtB;AAYE,IAAA,OAAO,EAAEmB,OAZX;AAaE,IAAA,UAAU,EAAEC,UAbd;AAcE,IAAA,IAAI,EAAEZ,IAdR;AAeE,IAAA,KAAK,EAAED,KAfT;AAgBE,IAAA,SAAS,EAAEE,SAhBb;AAiBE,IAAA,MAAM,EAAEK,YAjBV;AAkBE,IAAA,SAAS,EAAEC,eAlBb;AAmBE,IAAA,kBAAkB,EAAE,IAnBtB;AAoBE,IAAA,MAAM,EAAC,EApBT;AAqBE,IAAA,cAAc,EAAEX,SAAS,IAAI,QAAb,GAAwB,EAAxB,GAA6Ba,cArB/C;AAsBE,IAAA,iBAAiB,EAAEC,iBAtBrB;AAuBE,IAAA,kBAAkB,EAAC,YAvBrB;AAwBE,IAAA,QAAQ,EAAE,IAxBZ;AAyBE,IAAA,EAAE,EAAC;AAzBL,IAFF,CADF;AAgCD,CArED;;AAuEA,eAAenB,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","dropdownOpen","setDropdownOpen","useState","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyPress","e","current","contains","target","keyCode","useEffect","document","addEventListener","removeEventListener","renderIconButton","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyPress = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setDropdownOpen(!dropdownOpen);\n        \n      } else if (e.keyCode === 40) {\n        setDropdownOpen(!dropdownOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef} variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/esm/Dropdown/DropdownContent.js

@@ -174,11 +174,11 @@ const DropdownContent = ({
             setNewFocusedElement(focusedNow);
           }
         } else {
-          setNewFocusedElement(0);
+          setFocused(null);
         }
       } else if (e.keyCode === 27) {
         setIsOpen(false);
-        setNewFocusedElement(0); //TODO: add onEscapehandler
+        setFocused(null); //TODO: add onEscapehandler
 
         /*
         if (!list.includes(input)) {
@@ -255,9 +255,9 @@ const DropdownContent = ({
       const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
       if (focusThis != focused) setFocused(focusThis);
       const newFocusedElement = elRefs[focusThis];
-      console.log(newFocusedElement);
       newFocusedElement?.current?.focus();
-    }
+    } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item
+
   }, [isOpen]);
 
   const getTopItem = () => {