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

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

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

package/dist/esm/Dropdown/CommonStyling.js

@@ -60,6 +60,34 @@ const activeValidationMessage = css`
 const placeholderStyling = css`
   ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
 `;
+export const InputField = styled.input`
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+  border: none;
+  outline: none;
+  background-color: inherit;
+  cursor: pointer;
+  color: ${COLORS.black} !important;
+  padding: 0;
+  ::-webkit-search-decoration,
+  ::-webkit-search-cancel-button,
+  ::-webkit-search-results-button,
+  ::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+  ::placeholder {
+    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
+
+    ${BREAKPOINTS.MEDIUM} {
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
+    }
+    &.small {
+      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
+    }
+    &.medium {
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
+    }
+  }
+`;
 export const StyledField = styled.div`
   ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
 
@@ -98,7 +126,7 @@ export const StyledField = styled.div`
   }
 
   &.small {
-    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}
+    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
     padding: 12px 16px;
     height: 48px;
     &::placeholder {
@@ -238,11 +266,13 @@ export const DropdownButton = styled.button`
   width: 100%;
   text-align: left;
 
-  &.show-divider-above > span,
-  &.show-divider-above > div {
+  div.divider  {
     display: block;
-    width: calc(100% - 32px);
+    width: calc(100% - 40px);
+    margin-left: 16px;
     border-top: 1px solid #e5e5e5;
+    position: absolute;
+    top: 0px;
   }
 
   span {
@@ -318,6 +348,16 @@ export const ButtonDropdownWrapper = styled.div`
   align-items: center;
   width: fit-content;
 
+  .button {
+    min-width: 64px;
+  }
+
+  .value {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+  }
+
   .dropdown-arrow {
     width: 24px;
     height: 24px;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Size","Dropdown","div","props","isButton","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","StyledField","Regular","MEDIUM","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","neutral_400","DropdownButton","button","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"}
+{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Size","Dropdown","div","props","isButton","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","neutral_400","DropdownButton","button","size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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4B,OAApB,EAA6B7B,MAAM,CAACoB,WAApC,CAAiD;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBV,KAAK,IAAIA,KAAK,CAACoC,IAAN,IAAcvC,IAAI,CAAC0C,KAAnB,GAA2B,MAA3B,GAAoCvC,KAAK,CAACoC,IAAN,IAAcvC,IAAI,CAACyC,MAAnB,GAA4B,MAA5B,GAAqC,MAAO;AACzG,sBAAsBhD,MAAM,CAACsB,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;AACA;AACA,IAAIxB,wBAAyB;AAC7B;AACA;AACA,kBAAkBE,MAAM,CAACqC,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BrC,MAAM,CAACkD,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBlD,MAAM,CAACmD,UAAW;AAC1C;AACA;AACA,eAAenD,MAAM,CAACe,WAAY;AAClC;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACkD,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBlD,MAAM,CAACoD,WAAY;AAC3C;AACA;AACA,eAAepD,MAAM,CAACgB,WAAY;AAClC;AACA;AACA;AACA,0BAA0BhB,MAAM,CAACkD,WAAY;AAC7C;AACA;AACA,CA7FO;AA+FP,OAAO,MAAMG,qBAAqB,GAAGzD,MAAM,CAACa,GAA8C;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACE,MAAN,IAAgBF,KAAK,CAACG,QAAtB,GAAiC,sBAAjC,GAA0D,kBAAoB;AAC9F,IAAKH,KAAD,IAAYA,KAAK,CAACG,QAAN,GAAiB,uBAAjB,GAA2C,EAAI;AAC/D;AACA;AACA;AACA,wBAAwBb,MAAM,CAACmD,UAAW;AAC1C,aAAanD,MAAM,CAACsD,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBtD,MAAM,CAACoD,WAAY;AAC3C,aAAapD,MAAM,CAACgB,WAAY;AAChC;AACA;AACA,EA5CO","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 InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\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    ${ComponentSStyling(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  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\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  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\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/esm/Dropdown/DropdownButton.js

@@ -7,95 +7,41 @@ import * as React from 'react';
  */
 
 import { IconButton } from '../Button';
-import { SystemIcons as icons } from '../icons/index';
-import { COLORS } from '../styles';
-/**
- * Import custom styles.
- */
-
-import { DropdownContentStyling, DropdownButton as DB } from './CommonStyling';
+import DropdownContent from './DropdownContent';
+import styled from 'styled-components';
 /**
  * Import custom types.
  */
 
+const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
 const DropdownButton = ({
-  list,
+  items,
   icon,
-  iconSize,
   disabled,
+  onClick,
+  itemsType = 'normal',
+  action,
+  actionLabel = '',
   width,
-  iconColor,
-  onClick
+  size,
+  alignLeft,
+  multiSelect = false,
+  scrollable = false,
+  pinTopItem = false,
+  maxHeight
 }) => {
   // Globally used variables within the view.
   const [dropdownOpen, setDropdownOpen] = React.useState(false);
-  const dropdownContentRef = React.useRef(null);
-  /**
-   * Adds custom event handler.
-   */
-
-  React.useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
-  /**
-   * Checks if we have clicked outside the dropdown - then close the dropdown.
-   * @param event - Event handler from the mouse click.
-   */
-
-  const handleClickOutside = event => {
-    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(event.target)) {
-      if (dropdownOpen) {
-        setDropdownOpen(false);
-      }
-    }
-  };
-  /**
-   * Does all required actions when list item was selected.
-   * @param {Object} event - Event handler from the mouse click.
-   * @param {string} id - ID of the clicked list item.
-   */
-
-
-  const clickListItem = (event, id) => {
-    // Prevent default actions
-    event.preventDefault(); // Do all required actions
-
-    onClick(id);
-    setDropdownOpen(false);
-  };
-  /**
-   * Retrieves elements for the dropdown list.
-   * @returns Dropdown list elements HTML code.
-   */
-
-
-  const getElements = () => {
-    var options = list;
+  const [selectedValues, setSelectedValues] = React.useState([]);
+  const [focused, setFocused] = React.useState(null);
 
-    if (options.length === 0) {
-      return /*#__PURE__*/React.createElement(DB, {
-        disabled: true
-      }, /*#__PURE__*/React.createElement("span", null, "There are no options available"));
-    }
-
-    return options.map(item => {
-      return /*#__PURE__*/React.createElement(DB, {
-        type: "button",
-        onClick: event => {
-          if (!item.disabled) clickListItem(event, item.id);
-        },
-        key: item.id,
-        disabled: item.disabled,
-        className: item.showDividerAbove ? 'show-divider-above' : ''
-      }, item.icon && /*#__PURE__*/React.createElement("div", {
-        className: "item-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "item-label"
-      }, item.label), renderItemIcon(item.icon)), !item.icon && /*#__PURE__*/React.createElement("span", null, item.label));
-    });
+  const handleValueSelect = values => {
+    // Do all required actions
+    onClick(values);
   };
   /**
    * Renders Icon Button dropdown menu.
@@ -109,29 +55,36 @@ const DropdownButton = ({
       shape: "circular",
       action: () => setDropdownOpen(!dropdownOpen),
       disabled: disabled
-    }, icon && icons[icon]({
-      size: iconSize,
-      color: iconColor
-    }));
-  };
-
-  const renderItemIcon = i => {
-    return i && /*#__PURE__*/React.createElement("div", {
-      className: "item-icon"
-    }, icons[i]({
-      size: '20px',
-      color: COLORS.neutral_600
-    }));
+    }, icon);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderIconButton(), !disabled && /*#__PURE__*/React.createElement(DropdownContentStyling, {
-    isButton: false,
-    style: {
-      width
+  return /*#__PURE__*/React.createElement(Wrapper, null, renderIconButton(), /*#__PURE__*/React.createElement(DropdownContent, {
+    customizationProps: {
+      itemsType: itemsType,
+      action: action ?? (() => {}),
+      actionLabel: actionLabel,
+      onValueUpdate: handleValueSelect,
+      multiSelect: multiSelect,
+      scrollable: scrollable,
+      pinTopItem: pinTopItem,
+      maxHeight: maxHeight,
+      items: items
     },
-    ref: dropdownContentRef,
-    className: dropdownOpen ? 'show' : ''
-  }, getElements()));
+    focused: focused,
+    setFocused: setFocused,
+    size: size,
+    width: width,
+    alignLeft: alignLeft,
+    isOpen: dropdownOpen,
+    setIsOpen: setDropdownOpen,
+    hideOnClickOutside: true,
+    filter: "",
+    selectedValues: itemsType == 'normal' ? [] : selectedValues,
+    setSelectedValues: setSelectedValues,
+    messageOnNoResults: "No results",
+    isButton: true,
+    id: "dropdown-content"
+  }));
 };
 
 export default DropdownButton;

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

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