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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","COLORS","neutral_300","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentMStyling","ComponentTextStyle","black","StyledDropdownButton","DropdownButtonLabels","SecondaryLabel","span","ComponentXXSStyling","SuggestionButton","neutral_200","Loading","label","secondaryLabel","value","list","onInputChange","disableSorting","messageOnNoResults","isButton","autofilledMessage","suggestion","excludeIcon","loading","maxSelectedItems","ChipDropdownInput","React","chipInput","styledFieldRef","dropdownRef","setChips","newList","e","setGivenList","addChip","newChip","onValueChange","setValue","onAddChip","event","givenList","onRemoveChip","chips","newChips","onEditChip","options","option","o","setCurrentSearchResult","getElements","number","currentSearchResult","setRestartFilter","setFocused","inputId","item","setNewFocusedElement","index","newFocusedElement","document","handleKeyDown","focusedNow","setDropdownIsOpen","matches","c","handleKeyPress","handleClickOutside","l","variants","placeholder","neutral_600","dropdownIsOpen","validationMessage","validationType","critical_500"],"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","COLORS","neutral_300","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentMStyling","ComponentTextStyle","black","StyledDropdownButton","Loading","label","secondaryLabel","value","list","onInputChange","disableSorting","messageOnNoResults","isButton","autofilledMessage","suggestion","excludeIcon","loading","maxSelectedItems","ChipDropdownInput","React","chipInput","styledFieldRef","setChips","newList","e","setGivenList","addChip","newChip","onValueChange","setValue","onAddChip","event","givenList","onRemoveChip","chips","newChips","onEditChip","options","option","o","setCurrentSearchResult","handleValueUpdate","values","setRestartFilter","handleKeyPress","matches","currentSearchResult","c","setDropdownIsOpen","handleClickOutside","document","dropdownItems","x","displayLabel","noteLabel","l","variants","index","placeholder","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","inputId","validationMessage","validationType","critical_500"],"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/umd/Dropdown/CommonStyling.js

@@ -1,22 +1,22 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../common", "../styles", "../styles/typography"], factory);
+    define(["exports", "styled-components", "../common", "../styles", "../styles/typography", "../types"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../common"), require("../styles"), require("../styles/typography"));
+    factory(exports, require("styled-components"), require("../common"), require("../styles"), require("../styles/typography"), require("../types"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.common, global.styles, global.typography);
+    factory(mod.exports, global.styledComponents, global.common, global.styles, global.typography, global.types);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _common, _styles, _typography) {
+})(this, function (exports, _styledComponents, _common, _styles, _typography, _types) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.ButtonDropdownWrapper = exports.DropdownButton = exports.DropdownContent = exports.StyledField = exports.Dropdown = undefined;
+  exports.ButtonDropdownWrapper = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.Dropdown = undefined;
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -41,14 +41,6 @@
     flex-grow: 1;
   }
 
-  .icon {
-    width: 24px;
-    height: 24px;
-    svg {
-      cursor: pointer;
-    }
-  }
-
   input:hover + div {
     color: ${_styles.COLORS.primary_600};
   }
@@ -196,11 +188,11 @@
 
   ${_common.CommonInteractionStyling};
 `;
-  const ButtonDropdownContentStyling = _styledComponents.css`
+  const ButtonDropdownContentStyling = exports.ButtonDropdownContentStyling = _styledComponents.css`
   min-width: 344px;
   right: 0;
 `;
-  const DropdownContent = exports.DropdownContent = _styledComponents2.default.div`
+  const DropdownContentStyling = exports.DropdownContentStyling = _styledComponents2.default.div`
   display: none;
   position: absolute;
   background-color: ${_styles.COLORS.white};
@@ -251,12 +243,17 @@
   }
 `;
   const DropdownButton = exports.DropdownButton = _styledComponents2.default.button`
-  ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+
+  ${props => props.size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+  ${props => props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+  ${props => props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
 
   position: relative;
   text-decoration: none;
-  display: block;
-  height: 48px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: ${props => props.size == _types.Size.Large ? '64px' : props.size == _types.Size.Medium ? '56px' : '48px'};
   background-color: ${_styles.COLORS.white};
   border: none;
   cursor: pointer;
@@ -278,7 +275,6 @@
 
   div.item-content {
     margin: auto 0 auto 16px;
-    line-height: 48px;
     display: flex;
     align-items: center;
 
@@ -287,6 +283,9 @@
     }
 
     div.item-icon {
+      margin-right: 6px;
+    }
+    div.item-icon-old {
       flex: 1 0 40px;
       display: flex;
       justify-content: flex-end;
@@ -342,6 +341,11 @@
   align-items: center;
   width: fit-content;
 
+  .dropdown-arrow {
+    width: 24px;
+    height: 24px;
+  }
+
   ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;'}
   ${props => props.disabled ? 'pointer-events: none;' : ''}
   

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","StyledField","ComponentSStyling","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","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","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","StyledField","ComponentSStyling","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","neutral_400","DropdownButton","button","Size","ComponentLStyling","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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AAjBmB,EAA8CjC,eAA7B,WAAjBiC,CAAkE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBnC,KAAK,IAAIA,KAAK,CAALA,IAAAA,IAAckC,YAAdlC,KAAAA,GAAAA,MAAAA,GAAoCA,KAAK,CAALA,IAAAA,IAAckC,YAAdlC,MAAAA,GAAAA,MAAAA,GAAqC,MAAO;AACzG,sBAAsBE,eAAOS,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIgB,gCAAyB;AAC7B;AACA;AACA,kBAAkBzB,eAAOwB,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BxB,eAAOkC,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBlC,eAAOmC,UAAW;AAC1C;AACA;AACA,eAAenC,eAAOC,WAAY;AAClC;AACA;AACA;AACA,0BAA0BD,eAAOkC,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBlC,eAAOoC,WAAY;AAC3C;AACA;AACA,eAAepC,eAAOE,WAAY;AAClC;AACA;AACA;AACA,0BAA0BF,eAAOkC,WAAY;AAC7C;AACA;AA1FO,CAAA;AA6FA,QAAMG,qBAAqB,WAArBA,qBAAqB,GAAGzC,2BAAOC,GAA8C;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAArBA,QAAAA,GAAAA,sBAAAA,GAA0D,kBAAoB;AAC9F,IAAKA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,uBAAAA,GAA2C,EAAI;AAC/D;AACA;AACA;AACA,wBAAwBE,eAAOmC,UAAW;AAC1C,aAAanC,eAAOsC,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBtC,eAAOoC,WAAY;AAC3C,aAAapC,eAAOE,WAAY;AAChC;AACA;AAjCO,EAAA","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/umd/Dropdown/DropdownButton.js

@@ -190,7 +190,7 @@
       }));
     };
 
-    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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["DropdownButton","onClick","React","dropdownContentRef","document","handleClickOutside","event","setDropdownOpen","clickListItem","getElements","options","item","renderItemIcon","renderIconButton","disabled","icon","size","color","iconColor","i","COLORS","neutral_600","width","dropdownOpen"],"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 { 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","onClick","React","dropdownContentRef","document","handleClickOutside","event","setDropdownOpen","clickListItem","getElements","options","item","renderItemIcon","renderIconButton","disabled","icon","size","color","iconColor","i","COLORS","neutral_600","width","dropdownOpen"],"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"}