@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","ChipInputContainer","COLORS","neutral_300","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentTextStyle","Regular","black","StyledDropdownButton","DropdownButton","DropdownButtonLabels","SecondaryLabel","span","neutral_600","SuggestionButton","neutral_200","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","React","useState","givenList","setGivenList","chips","setChips","value","setValue","dropdownIsOpen","setDropdownIsOpen","currentSearchResult","setCurrentSearchResult","restartFilter","setRestartFilter","focused","setFocused","chipInput","useRef","styledFieldRef","dropdownRef","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","getElements","number","focus","toLowerCase","secondaryLabel","item","setNewFocusedElement","newFocusedElement","document","getElementById","handleKeyDown","focusedNow","undefined","matches","c","target","handleKeyPress","contains","handleClickOutside","addEventListener","removeEventListener","stopPropagation","chip","l","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, DropdownContent } from './CommonStyling';\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 DropdownButtonLabels = styled.div`\n  display: flex;\n  flex-direction: column;\n  span {\n    line-height: 24px;\n  }\n`;\n\nconst SecondaryLabel = styled.span`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst SuggestionButton = styled(StyledDropdownButton)`\n  border-bottom: 1px solid ${COLORS.neutral_200};\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  const dropdownRef = React.useRef<any>();\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 getElements = () => {\n    var number = 0;\n    if (currentSearchResult?.length === 0 && !suggestion) {\n      return (\n        <DropdownButton disabled>\n          <span>{messageOnNoResults}</span>\n        </DropdownButton>\n      );\n    }\n    return (\n      <>\n        {suggestion && (\n          <SuggestionButton\n            type=\"button\"\n            tabIndex={-1}\n            onClick={(e: any) => {\n              e.preventDefault();\n              setRestartFilter(true);\n              addChip(suggestion.value);\n              setFocused(null);\n              chipInput?.current?.focus();\n            }}\n            className={suggestion.value.toLowerCase() === value.toLowerCase() ? 'active' : ''}\n            key={suggestion.value}\n            id={`${inputId}_${number++}`}>\n            {!excludeIcon && <User size=\"24px\" />}\n            {suggestion.secondaryLabel ? (\n              <DropdownButtonLabels>\n                <span>{suggestion.label}</span>\n                <SecondaryLabel>{suggestion.secondaryLabel}</SecondaryLabel>\n              </DropdownButtonLabels>\n            ) : (\n              <span>{suggestion.label}</span>\n            )}\n          </SuggestionButton>\n        )}\n        {currentSearchResult?.map((item) => {\n          return (\n            <StyledDropdownButton\n              type=\"button\"\n              tabIndex={-1}\n              onClick={(e: any) => {\n                e.preventDefault();\n                setRestartFilter(true);\n                addChip(item.value);\n                setFocused(null);\n                chipInput?.current?.focus();\n              }}\n              className={item.value.toLowerCase() === value.toLowerCase() ? 'active' : ''}\n              key={item.value}\n              id={`${inputId}_${number++}`}>\n              {!excludeIcon && <User size=\"24px\" />}\n              {item.secondaryLabel ? (\n                <DropdownButtonLabels>\n                  <span>{item.label}</span>\n                  <SecondaryLabel>{item.secondaryLabel}</SecondaryLabel>\n                </DropdownButtonLabels>\n              ) : (\n                <span>{item.label}</span>\n              )}\n            </StyledDropdownButton>\n          );\n        })}\n      </>\n    );\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = document.getElementById(`${inputId}_${index}`);\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement.focus();\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (dropdownIsOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        setDropdownIsOpen(false);\n      } else if (e.keyCode === 27) {\n        setDropdownIsOpen(false);\n        setNewFocusedElement(0);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n        styledFieldRef.current?.focus();\n      } else 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        setDropdownIsOpen(!dropdownIsOpen);\n        setNewFocusedElement(0);\n        if (matches?.length === 0) {\n          setValue('');\n        }\n      }\n    }\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        setDropdownIsOpen(!dropdownIsOpen);\n        setNewFocusedElement(0);\n        if (matches?.length === 0) {\n          setValue('');\n        }\n      } else if (e.keyCode === 40) {\n        setDropdownIsOpen(!dropdownIsOpen);\n        setNewFocusedElement(0);\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        setFocused(null);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Return Chip Input component.\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 isButton={false} ref={dropdownRef} id={`${inputId}_dropdowncontent`} className={dropdownIsOpen ? 'show' : ''}>\n          {getElements()}\n        </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":["Wrapper","styled","div","StyledChipInputContainer","ChipInputContainer","COLORS","neutral_300","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentTextStyle","Regular","black","StyledDropdownButton","DropdownButton","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","React","useState","givenList","setGivenList","chips","setChips","value","setValue","dropdownIsOpen","setDropdownIsOpen","currentSearchResult","setCurrentSearchResult","restartFilter","setRestartFilter","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","isButton","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","critical_500","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\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        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            isButton: false,\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          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/js/Dropdown/CommonStyling.d.ts

@@ -1,3 +1,4 @@
+import { Size } from '../types';
 export declare const Dropdown: import("styled-components").StyledComponent<"div", any, {
     isButton: boolean;
     locked?: boolean;
@@ -11,10 +12,13 @@ export declare const StyledField: import("styled-components").StyledComponent<"d
     isPlaceholder?: boolean;
     fontSize?: string;
 }, never>;
-export declare const DropdownContent: import("styled-components").StyledComponent<"div", any, {
+export declare const ButtonDropdownContentStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const DropdownContentStyling: import("styled-components").StyledComponent<"div", any, {
     isButton: boolean;
 }, never>;
-export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
+    size?: Size;
+}, never>;
 export declare const ButtonDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
     locked?: boolean;
     disabled?: boolean;

package/dist/js/Dropdown/CommonStyling.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonDropdownWrapper = exports.DropdownButton = exports.DropdownContent = exports.StyledField = exports.Dropdown = void 0;
+exports.ButtonDropdownWrapper = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.Dropdown = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -15,6 +15,8 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
+var _types = require("../types");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,7 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  ", "\n  ", "\n  ", "\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  .icon {\n    width: 24px;\n    height: 24px;\n    svg {\n      cursor: pointer;\n    }\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n"])), function (props) {
+var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  ", "\n  ", "\n  ", "\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n"])), function (props) {
   return !props.isButton && 'width: 100%; min-width: 344px;';
 }, function (props) {
   return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
@@ -51,20 +53,29 @@ var StyledField = _styledComponents.default.div(_templateObject6 || (_templateOb
 
 exports.StyledField = StyledField;
 var ButtonDropdownContentStyling = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 344px;\n  right: 0;\n"])));
+exports.ButtonDropdownContentStyling = ButtonDropdownContentStyling;
 
-var DropdownContent = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: 1;\n  margin-top: ", ";\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, function (props) {
+var DropdownContentStyling = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: 1;\n  margin-top: ", ";\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, function (props) {
   return props.isButton ? '-4px' : '2px';
 }, function (props) {
   return props.isButton ? ButtonDropdownContentStyling : '';
 }, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.neutral_400);
 
-exports.DropdownContent = DropdownContent;
+exports.DropdownContentStyling = DropdownContentStyling;
 
-var DropdownButton = _styledComponents.default.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n\n  position: relative;\n  text-decoration: none;\n  display: block;\n  height: 48px;\n  background-color: ", ";\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  &.show-divider-above > span,\n  &.show-divider-above > div {\n    display: block;\n    width: calc(100% - 32px);\n    border-top: 1px solid #e5e5e5;\n  }\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ", ";\n\n  &.active {\n    background: ", ";\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+var DropdownButton = _styledComponents.default.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\n  ", "\n  ", "\n  ", "\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ", ";\n  background-color: ", ";\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  &.show-divider-above > span,\n  &.show-divider-above > div {\n    display: block;\n    width: calc(100% - 32px);\n    border-top: 1px solid #e5e5e5;\n  }\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ", ";\n\n  &.active {\n    background: ", ";\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
+}, function (props) {
+  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
+}, function (props) {
+  return props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
+}, function (props) {
+  return props.size == _types.Size.Large ? '64px' : props.size == _types.Size.Medium ? '56px' : '48px';
+}, _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
 
 exports.DropdownButton = DropdownButton;
 
-var ButtonDropdownWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  ", "\n  ", "\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n}"])), function (props) {
+var ButtonDropdownWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ", "\n  ", "\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n}"])), function (props) {
   return props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;';
 }, function (props) {
   return props.disabled ? 'pointer-events: none;' : '';

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

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

package/dist/js/Dropdown/DropdownButton.js

@@ -145,7 +145,7 @@ var DropdownButton = function DropdownButton(_ref) {
     }));
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderIconButton(), !disabled && /*#__PURE__*/React.createElement(_CommonStyling.DropdownContent, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderIconButton(), !disabled && /*#__PURE__*/React.createElement(_CommonStyling.DropdownContentStyling, {
     isButton: false,
     style: {
       width: width

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["DropdownButton","list","icon","iconSize","disabled","width","iconColor","onClick","React","useState","dropdownOpen","setDropdownOpen","dropdownContentRef","useRef","useEffect","document","addEventListener","handleClickOutside","removeEventListener","event","current","contains","target","clickListItem","id","preventDefault","getElements","options","length","map","item","showDividerAbove","label","renderItemIcon","renderIconButton","icons","size","color","i","COLORS","neutral_600"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;;;;;;;;;;;;;;;;;AAOA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAAwF;AAAA,MAArFC,IAAqF,QAArFA,IAAqF;AAAA,MAA/EC,IAA+E,QAA/EA,IAA+E;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,QAA+D,QAA/DA,QAA+D;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,SAA8C,QAA9CA,SAA8C;AAAA,MAAnCC,OAAmC,QAAnCA,OAAmC;;AAC7G;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AACA,MAAMC,kBAAkB,GAAGJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAA3B;AAEA;AACF;AACA;;AACEL,EAAAA,KAAK,CAACM,SAAN,CAAgB,YAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCC,kBAAnC;AACA,WAAO,YAAM;AACXF,MAAAA,QAAQ,CAACG,mBAAT,CAA6B,OAA7B,EAAsCD,kBAAtC;AACD,KAFD;AAGD,GALD;AAOA;AACF;AACA;AACA;;AACE,MAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACE,KAAD,EAAgB;AACzC,QAAIP,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAEQ,OAApB,IAA+B,CAACR,kBAAkB,CAACQ,OAAnB,CAA2BC,QAA3B,CAAoCF,KAAK,CAACG,MAA1C,CAApC,EAAuF;AACrF,UAAIZ,YAAJ,EAAkB;AAChBC,QAAAA,eAAe,CAAC,KAAD,CAAf;AACD;AACF;AACF,GAND;AAQA;AACF;AACA;AACA;AACA;;;AACE,MAAMY,aAAa,GAAG,SAAhBA,aAAgB,CAACJ,KAAD,EAA0BK,EAA1B,EAA+C;AACnE;AACAL,IAAAA,KAAK,CAACM,cAAN,GAFmE,CAInE;;AACAlB,IAAAA,OAAO,CAACiB,EAAD,CAAP;AACAb,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAPD;AASA;AACF;AACA;AACA;;;AACE,MAAMe,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIC,OAAO,GAAG1B,IAAd;;AAEA,QAAI0B,OAAO,CAACC,MAAR,KAAmB,CAAvB,EAA0B;AACxB,0BACE,oBAAC,6BAAD;AAAI,QAAA,QAAQ;AAAZ,sBACE,mEADF,CADF;AAKD;;AACD,WAAOD,OAAO,CAACE,GAAR,CAAY,UAACC,IAAD,EAAU;AAC3B,0BACE,oBAAC,6BAAD;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,OAAO,EAAE,iBAACX,KAAD,EAA6B;AACpC,cAAI,CAACW,IAAI,CAAC1B,QAAV,EAAoBmB,aAAa,CAACJ,KAAD,EAAQW,IAAI,CAACN,EAAb,CAAb;AACrB,SAJH;AAKE,QAAA,GAAG,EAAEM,IAAI,CAACN,EALZ;AAME,QAAA,QAAQ,EAAEM,IAAI,CAAC1B,QANjB;AAOE,QAAA,SAAS,EAAE0B,IAAI,CAACC,gBAAL,GAAwB,oBAAxB,GAA+C;AAP5D,SAQGD,IAAI,CAAC5B,IAAL,iBACC;AAAK,QAAA,SAAS,EAAC;AAAf,sBACE;AAAK,QAAA,SAAS,EAAC;AAAf,SAA6B4B,IAAI,CAACE,KAAlC,CADF,EAEGC,cAAc,CAACH,IAAI,CAAC5B,IAAN,CAFjB,CATJ,EAcG,CAAC4B,IAAI,CAAC5B,IAAN,iBAAc,kCAAO4B,IAAI,CAACE,KAAZ,CAdjB,CADF;AAkBD,KAnBM,CAAP;AAoBD,GA9BD;AAgCA;AACF;AACA;AACA;;;AACE,MAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7B,wBACE,oBAAC,kBAAD;AAAY,MAAA,OAAO,EAAC,WAApB;AAAgC,MAAA,KAAK,EAAC,UAAtC;AAAiD,MAAA,MAAM,EAAE;AAAA,eAAMvB,eAAe,CAAC,CAACD,YAAF,CAArB;AAAA,OAAzD;AAA+F,MAAA,QAAQ,EAAEN;AAAzG,OACGF,IAAI,IAAIiC,mBAAMjC,IAAN,EAAY;AAAEkC,MAAAA,IAAI,EAAEjC,QAAR;AAAkBkC,MAAAA,KAAK,EAAE/B;AAAzB,KAAZ,CADX,CADF;AAKD,GAND;;AAQA,MAAM2B,cAAc,GAAG,SAAjBA,cAAiB,CAACK,CAAD,EAA0B;AAC/C,WAAOA,CAAC,iBAAI;AAAK,MAAA,SAAS,EAAC;AAAf,OAA4BH,mBAAMG,CAAN,EAAS;AAAEF,MAAAA,IAAI,EAAE,MAAR;AAAgBC,MAAAA,KAAK,EAAEE,eAAOC;AAA9B,KAAT,CAA5B,CAAZ;AACD,GAFD;;AAIA,sBACE,0CACGN,gBAAgB,EADnB,EAGG,CAAC9B,QAAD,iBACC,oBAAC,8BAAD;AAAiB,IAAA,QAAQ,EAAE,KAA3B;AAAkC,IAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,EAALA;AAAF,KAAzC;AAAoD,IAAA,GAAG,EAAEO,kBAAzD;AAA6E,IAAA,SAAS,EAAEF,YAAY,GAAG,MAAH,GAAY;AAAhH,KACGgB,WAAW,EADd,CAJJ,CADF;AAWD,CAxGD;;eA0Ge1B,c","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport { SystemIcons as icons } from '../icons/index';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { DropdownContent, DropdownButton as DB } from './CommonStyling';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps, Icons } from './DropdownButtonTypes';\n\nconst DropdownButton = ({ list, icon, iconSize, disabled, width, iconColor, onClick }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Adds custom event handler.\n   */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Checks if we have clicked outside the dropdown - then close the dropdown.\n   * @param event - Event handler from the mouse click.\n   */\n  const handleClickOutside = (event: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(event.target)) {\n      if (dropdownOpen) {\n        setDropdownOpen(false);\n      }\n    }\n  };\n\n  /**\n   * Does all required actions when list item was selected.\n   * @param {Object} event - Event handler from the mouse click.\n   * @param {string} id - ID of the clicked list item.\n   */\n  const clickListItem = (event: React.MouseEvent, id: string): void => {\n    // Prevent default actions\n    event.preventDefault();\n\n    // Do all required actions\n    onClick(id);\n    setDropdownOpen(false);\n  };\n\n  /**\n   * Retrieves elements for the dropdown list.\n   * @returns Dropdown list elements HTML code.\n   */\n  const getElements = () => {\n    var options = list;\n\n    if (options.length === 0) {\n      return (\n        <DB disabled>\n          <span>There are no options available</span>\n        </DB>\n      );\n    }\n    return options.map((item) => {\n      return (\n        <DB\n          type=\"button\"\n          onClick={(event: React.MouseEvent) => {\n            if (!item.disabled) clickListItem(event, item.id);\n          }}\n          key={item.id}\n          disabled={item.disabled}\n          className={item.showDividerAbove ? 'show-divider-above' : ''}>\n          {item.icon && (\n            <div className=\"item-content\">\n              <div className=\"item-label\">{item.label}</div>\n              {renderItemIcon(item.icon)}\n            </div>\n          )}\n          {!item.icon && <span>{item.label}</span>}\n        </DB>\n      );\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 variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon && icons[icon]({ size: iconSize, color: iconColor })}\n      </IconButton>\n    );\n  };\n\n  const renderItemIcon = (i: Icons | undefined) => {\n    return i && <div className=\"item-icon\">{icons[i]({ size: '20px', color: COLORS.neutral_600 })}</div>;\n  };\n\n  return (\n    <>\n      {renderIconButton()}\n\n      {!disabled && (\n        <DropdownContent isButton={false} style={{ width }} ref={dropdownContentRef} className={dropdownOpen ? 'show' : ''}>\n          {getElements()}\n        </DropdownContent>\n      )}\n    </>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["DropdownButton","list","icon","iconSize","disabled","width","iconColor","onClick","React","useState","dropdownOpen","setDropdownOpen","dropdownContentRef","useRef","useEffect","document","addEventListener","handleClickOutside","removeEventListener","event","current","contains","target","clickListItem","id","preventDefault","getElements","options","length","map","item","showDividerAbove","label","renderItemIcon","renderIconButton","icons","size","color","i","COLORS","neutral_600"],"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 { SystemIcons as icons } from '../icons/index';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { DropdownContentStyling, DropdownButton as DB } from './CommonStyling';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps, Icons } from './DropdownButtonTypes';\n\nconst DropdownButton = ({ list, icon, iconSize, disabled, width, iconColor, onClick }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Adds custom event handler.\n   */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Checks if we have clicked outside the dropdown - then close the dropdown.\n   * @param event - Event handler from the mouse click.\n   */\n  const handleClickOutside = (event: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(event.target)) {\n      if (dropdownOpen) {\n        setDropdownOpen(false);\n      }\n    }\n  };\n\n  /**\n   * Does all required actions when list item was selected.\n   * @param {Object} event - Event handler from the mouse click.\n   * @param {string} id - ID of the clicked list item.\n   */\n  const clickListItem = (event: React.MouseEvent, id: string): void => {\n    // Prevent default actions\n    event.preventDefault();\n\n    // Do all required actions\n    onClick(id);\n    setDropdownOpen(false);\n  };\n\n  /**\n   * Retrieves elements for the dropdown list.\n   * @returns Dropdown list elements HTML code.\n   */\n  const getElements = () => {\n    var options = list;\n\n    if (options.length === 0) {\n      return (\n        <DB disabled>\n          <span>There are no options available</span>\n        </DB>\n      );\n    }\n    return options.map((item) => {\n      return (\n        <DB\n          type=\"button\"\n          onClick={(event: React.MouseEvent) => {\n            if (!item.disabled) clickListItem(event, item.id);\n          }}\n          key={item.id}\n          disabled={item.disabled}\n          className={item.showDividerAbove ? 'show-divider-above' : ''}>\n          {item.icon && (\n            <div className=\"item-content\">\n              <div className=\"item-label\">{item.label}</div>\n              {renderItemIcon(item.icon)}\n            </div>\n          )}\n          {!item.icon && <span>{item.label}</span>}\n        </DB>\n      );\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 variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon && icons[icon]({ size: iconSize, color: iconColor })}\n      </IconButton>\n    );\n  };\n\n  const renderItemIcon = (i: Icons | undefined) => {\n    return i && <div className=\"item-icon\">{icons[i]({ size: '20px', color: COLORS.neutral_600 })}</div>;\n  };\n\n  return (\n    <>\n      {renderIconButton()}\n\n      {!disabled && (\n        <DropdownContentStyling isButton={false} style={{ width }} ref={dropdownContentRef} className={dropdownOpen ? 'show' : ''}>\n          {getElements()}\n        </DropdownContentStyling>\n      )}\n    </>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/js/Dropdown/DropdownContent.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Size } from '../types';
+export declare const DDContainer: import("styled-components").StyledComponent<"div", any, {
+    isButton: boolean;
+    alignLeft?: boolean;
+    size?: Size;
+    scrollable?: boolean;
+    maxHeight?: string;
+}, never>;
+export interface DropdownItem {
+    value: string;
+    displayLabel?: string;
+    noteLabel?: string;
+    suggestion?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export interface DropdownCustomizationProps {
+    itemsType?: 'radio' | 'checkbox' | 'normal';
+    scrollable?: boolean;
+    multiSelect?: boolean;
+    maxHeight?: string;
+    actionLabel?: string;
+    action: () => void;
+    pinTopItem?: boolean;
+    isButton: boolean;
+    onValueUpdate: (values: string[]) => void;
+    items: DropdownItem[];
+}
+export interface DropdownProps {
+    isButton: boolean;
+    customizationProps: DropdownCustomizationProps;
+    alignLeft?: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    size?: Size;
+    id: string;
+    filter: string;
+    hideOnClickOutside: boolean;
+    selectedValues: string[];
+    setSelectedValues: (val: string[]) => void;
+    messageOnNoResults: string;
+}
+declare const DropdownContent: React.FunctionComponent<DropdownProps>;
+export default DropdownContent;