@laerdal/life-react-components 1.3.2-dev.6.full → 1.3.2-dev.7

package/dist/esm/Button/Iconbutton.js

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

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

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

package/dist/esm/Dropdown/DropdownButton.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","label","toLowerCase","length","useEffect","some","x","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","Small","neutral_600","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ninterface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  scrollable?: boolean;\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  scrollable,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\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>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0].label);\n          setInput(matches[0].label);\n        }\n        if(!isOpen)\n          setFocused(0);\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        if(!isOpen)\n          setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\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    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if(list.some(x => x.label == input))\n    {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          size={size ?? Size.Small}\n          focused={focused}\n          setFocused={setFocused}\n          customizationProps={{\n            itemsType: 'normal',\n            scrollable: scrollable,\n            multiSelect: false,\n            action: () => {},\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x.label, customContent: x.customContent }))\n          }}\n          filter={!restartFilter ? input : ''}\n          setIsOpen={setIsOpen}\n          alignLeft={false}\n          isButton={isButton || false}\n          id={`${id}_dropdowncontent`} />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","scrollable","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","label","toLowerCase","length","useEffect","some","x","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","Small","neutral_600","renderButtonDropdown","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","customContent","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport interface DropdownFilterItem {\n  label: string;\n  customContent?: React.ReactNode;\n}\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownFilterItem[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  scrollable?: boolean;\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  scrollable,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\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>(initalValue ?? '');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = list?.filter((c) => c.label.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0].label);\n          setInput(matches[0].label);\n        }\n        if(!isOpen)\n          setFocused(0);\n        setIsOpen(!isOpen);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        if(!isOpen)\n          setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    if (!isOpen && !list.some(x => x.label == input)) {\n      setInput('');\n      setPlaceholderSearch(placeholder || '');\n    }\n  }, [isOpen]);\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    if (selectedValues.length > 0 && !list.some(x => x.label == input))\n      setSelectedValues([]);\n\n    if(list.some(x => x.label == input))\n    {\n      setSelectedValues([input]);\n      onSelect && onSelect(input);\n    }\n  }, [input]);\n\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n          isOpen={isOpen}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          selectedValues={selectedValues}\n          setSelectedValues={setSelectedValues}\n          hideOnClickOutside={true}\n          size={size ?? Size.Small}\n          focused={focused}\n          setFocused={setFocused}\n          customizationProps={{\n            itemsType: 'normal',\n            scrollable: scrollable,\n            multiSelect: false,\n            action: () => {},\n            onValueUpdate: (values: string[]) => {\n              const val = values[0] ?? '';\n              setRestartFilter(true);\n              setInput(val);\n            },\n            items: list.map(x => ({ value: x.label, customContent: x.customContent }))\n          }}\n          filter={!restartFilter ? input : ''}\n          setIsOpen={setIsOpen}\n          alignLeft={false}\n          isButton={isButton || false}\n          id={`${id}_dropdowncontent`} />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/dist/esm/HyperLink/HyperLink.js

@@ -11,6 +11,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { defaultStyle, invertedStyle } from './styling';
 const StyledLink = styled.a`
+  cursor: pointer;
   ${props => props.variant === 'inverted' ? invertedStyle : defaultStyle}
   ${props => props.margin ? `margin: ${props.margin};` : ''}
 `;
@@ -31,7 +32,7 @@ const HyperLink = _ref => {
 };
 
 HyperLink.propTypes = {
-  id: _pt.string.isRequired,
+  id: _pt.string,
   variant: _pt.oneOf(['default', 'inverted']).isRequired,
   href: _pt.string.isRequired,
   disabled: _pt.bool,

package/dist/esm/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CANA;;AAkBA,MAAMC,SAAkD,GAAG,QAAoF;AAAA,MAAnF;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAM,GAAG,QAArB;AAA+BJ,IAAAA,OAAO,GAAG;AAAzC,GAAmF;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAPA;;AAmBA,MAAMC,SAAkD,GAAG,QAAoF;AAAA,MAAnF;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAM,GAAG,QAArB;AAA+BJ,IAAAA,OAAO,GAAG;AAAzC,GAAmF;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  cursor: pointer;\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id?: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/esm/InputFields/Checkbox.js

@@ -61,7 +61,7 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  &:not(.disabled):focus {
+  &:not(.disabled):not(.readonly):focus {
     outline: none;
 
     .checkbox-icon {
@@ -74,7 +74,7 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  &:not(.disabled):hover {
+  &:not(.disabled):not(.readonly):hover {
     .checkbox-icon {
       background-color: ${COLORS.primary_20};
 
@@ -84,7 +84,7 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  &:not(.disabled):active {
+  &:not(.disabled):not(.readonly):active {
     .checkbox-icon {
       background: ${COLORS.primary_100};
       box-shadow: none;
@@ -95,6 +95,14 @@ const StyledCheckBox = styled.div`
     }
   }
 
+  &.readonly{
+    cursor: inherit;
+    .checkbox-icon,
+    .checkbox-label {
+      pointer-events: none;
+    }
+  }
+  
   &.disabled {
     box-shadow: none;
     cursor: not-allowed;
@@ -126,20 +134,21 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   margin,
   size,
   semiSelected,
-  children
+  children,
+  readonly
 }, ref) => {
   const onKeyPress = e => {
-    if (e.keyCode === 13 && !disabled) {
-      select(!selected);
+    if (e.keyCode === 13 && !disabled && !readonly) {
+      select && select(!selected);
     }
   };
 
   const handleClick = () => {
-    if (disabled) {
+    if (disabled || readonly) {
       return;
     }
 
-    select(!selected);
+    select && select(!selected);
   };
 
   size = size ?? Size.Medium;
@@ -147,9 +156,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     key: id,
     ref: ref,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
     selected: selected,
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: disabled || readonly ? -1 : 0,
     showWarning: showWarning,
     margin: margin,
     onClick: handleClick,
@@ -176,15 +185,16 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   }, children));
 });
 Checkbox.propTypes = {
-  id: _pt.string.isRequired,
+  id: _pt.string,
   selected: _pt.bool.isRequired,
-  select: _pt.func.isRequired,
+  select: _pt.func,
   label: _pt.string,
   showWarning: _pt.bool,
   disabled: _pt.bool,
   margin: _pt.string,
   iconPointerEventsTransparent: _pt.bool,
-  semiSelected: _pt.bool
+  semiSelected: _pt.bool,
+  readonly: _pt.bool
 };
 export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/dist/esm/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}