@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/Dropdown/DropdownContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","width","Z_INDEXES","dropdown","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","Size","Large","Medium","scrollable","maxHeight","ItemsContainer","hover","active","focus","ListContainer","itemsType","neutral_600","neutral_500","MenuContentContainer","ComponentTextStyle","Bold","Small","Regular","DividerContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","React","useState","isUp","setIsUp","dropdownContentRef","useRef","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","getFilteredItems","filtrationString","toUpperCase","x","value","includes","displayLabel","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","filtered","i","disabled","haveTopItem","document","getElementById","handleClickOutside","contains","target","some","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","multiSelect","getSuggestions","suggestion","useLayoutEffect","focusThis","handleItemClick","selected","item","newValue","onValueUpdate","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","find","c","selectedFirst","newValues","icon","noteLabel","fontSize","getElements","number","customContent","showDividerAbove","join","menuContent","action","actionLabel","actionIcon","actionLoading","actionDisabled","actionVariant"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport Button from '../Button/Button';\r\nimport { Size } from '../types';\r\nimport { ButtonDropdownContentStyling, DropdownButtonCSS } from './CommonStyling';\r\nimport { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\nimport { COLORS } from '../styles';\r\nimport { Checkbox, RadioButton } from '../InputFields';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\r\n  display: none;\r\n  position: absolute;\r\n  background-color: ${COLORS.white};\r\n\r\n  width: ${(props) => (props.width ? props.width : '100%')};\r\n  z-index: ${Z_INDEXES.dropdown};\r\n  margin: ${(props) => (props.isButton ? '-4px' : '4px 0px')};\r\n\r\n  &.show {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n\r\n  &.up {\r\n    top: auto;\r\n    bottom: 100%;\r\n  }\r\n\r\n  ${(props) => (props.alignLeft ? 'left: 0px;' : '')}\r\n\r\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\r\n\r\n  border: 1px solid ${COLORS.neutral_100};\r\n  box-sizing: border-box;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n  padding-top: 4px;\r\n  padding-right: 0px;\r\n  padding-bottom: 4px;\r\n  padding-left: 0px;\r\n\r\n  min-width: ${(props) => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\r\n  border-radius: ${(props) => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\r\n\r\n  max-height: ${(props) => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\r\n`;\r\n\r\nconst ItemsContainer = styled.div<{size? : Size}>`\r\n  > *:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n  > *:active,\r\n  > *.active{\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n  > *:focus {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n  \r\n  button.dropdownButton {\r\n    ${props => DropdownButtonCSS(props.size)}\r\n  }`;\r\n  \r\nconst ListContainer = styled.div<{ scrollable?: boolean; size?: Size; itemsType?: string }>`\r\n  ${(props) => (props.scrollable ? 'overflow-y: scroll;' : '')}\r\n  ${(props) => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\r\n\r\n\r\n  div.divider  {\r\n    display: block;\r\n    width: calc(100% - 40px);\r\n    margin-left: 16px;\r\n    border-top: 1px solid #e5e5e5;\r\n    position: absolute;\r\n    top: 0px;\r\n  }\r\n\r\n  ${ItemsContainer} {\r\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\r\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\r\n  }\r\n\r\n  /* width */\r\n  ::-webkit-scrollbar {\r\n    width: 4px;\r\n    margin: 0 6px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* Track */\r\n  ::-webkit-scrollbar-track {\r\n    background: ${COLORS.neutral_100};\r\n    border-radius: 8px;\r\n  }\r\n\r\n  /* Handle */\r\n  ::-webkit-scrollbar-thumb {\r\n    background: ${COLORS.neutral_600};\r\n    border-radius: 8px;\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:hover {\r\n    background: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\n\r\nconst MenuContentContainer = styled.div<{size? : Size}>`\r\n  h1, h2, h3 {\r\n    margin-block-start: 0px;\r\n    margin-block-end: 0px;\r\n    ${props => props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\r\n    ${props => props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\r\n    ${props => (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\r\n    padding: ${props => props.size == Size.Small || !props.size ? '10px 16px 6px' :\r\n      props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};\r\n  }\r\n\r\n  p {\r\n    margin-block-start: 0px;\r\n    margin-block-end: 0px;\r\n    ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\r\n    ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\r\n    ${props => (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\r\n    padding: ${props => props.size == Size.Small || !props.size ? '8px 16px' :\r\n      props.size == Size.Medium ? '12px 24px' : '16px 32px'};\r\n  }\r\n`;\r\n\r\nconst DividerContainer = styled.div<{size? : Size}>`\r\n  position: relative;\r\n\r\n  margin-top: ${props => props.size == Size.Large ? '16px' : \r\n      props.size == Size.Medium ? '12px' : \r\n      (props.size == Size.Small || !props.size) ? '8px' : '6px'};\r\n\r\n  div.divider {\r\n    width: 100%;\r\n    margin: 0px;\r\n  }\r\n`;\r\n\r\nconst TopItemContainer = styled.div<{size?:Size}>`\r\n  border-bottom-style: solid;\r\n  border-bottom-color: ${COLORS.neutral_200};\r\n  border-bottom-width: 1px;\r\n  margin-right: 22px;\r\n\r\n  button {\r\n    ${props => DropdownButtonCSS(props.size)}\r\n  }\r\n`;\r\n\r\nconst ActionButtonContainer = styled.div<{size?:Size}>`\r\n  border-top-style: solid;\r\n  border-top-color: ${COLORS.neutral_200};\r\n  border-top-width: 1px;\r\n  \r\n  padding: ${props => props.size == Size.Small || !props.size ? '0px 16px' : '8px 16px'};\r\n\r\n  button {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nconst MAX_MENU_HEIGHT = 240;\r\nconst AVG_OPTION_HEIGHT = 48;\r\n\r\nexport interface DropdownItem {\r\n  value: string;\r\n  displayLabel?: string;\r\n  noteLabel?: string;\r\n  suggestion?: boolean;\r\n  showDividerAbove?: boolean;\r\n  disabled?: boolean;\r\n  icon?: React.ReactNode;\r\n  customContent?: React.ReactNode;\r\n}\r\n\r\nexport interface DropdownCustomizationProps {\r\n  itemsType?: 'radio' | 'checkbox' | 'normal';\r\n  menuContent?: React.ReactNode;\r\n  scrollable?: boolean;\r\n  multiSelect?: boolean;\r\n  maxHeight?: string;\r\n  actionLabel?: string;\r\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\r\n  actionIcon?: React.ReactNode;\r\n  actionLoading?: boolean;\r\n  actionDisabled?: boolean;\r\n  action: () => boolean | void | undefined;\r\n  pinTopItem?: boolean;\r\n  onValueUpdate: (values: string[]) => boolean | void | undefined;\r\n  items: DropdownItem[];\r\n}\r\n\r\nexport interface DropdownProps {\r\n  isButton: boolean;\r\n  customizationProps: DropdownCustomizationProps;\r\n  alignLeft?: boolean;\r\n  isOpen: boolean;\r\n  setIsOpen: (open: boolean) => void;\r\n  size?: Size;\r\n  id: string;\r\n  filter: string;\r\n  width?: string;\r\n  hideOnClickOutside: boolean;\r\n  selectedValues: string[];\r\n  setSelectedValues: (val: string[]) => void;\r\n  messageOnNoResults: string;\r\n  focused: number | null;\r\n  setFocused: (focused: number | null) => void;\r\n}\r\n\r\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\r\n  id,\r\n  customizationProps,\r\n  alignLeft,\r\n  isButton,\r\n  size,\r\n  isOpen,\r\n  hideOnClickOutside,\r\n  width,\r\n  setIsOpen,\r\n  filter,\r\n  focused,\r\n  setFocused,\r\n  selectedValues,\r\n  setSelectedValues,\r\n  messageOnNoResults,\r\n}) => {\r\n  const [isUp, setIsUp] = React.useState<boolean>(false);\r\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';\r\n  if (!size) size = Size.Small;\r\n\r\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const determineDropUp = () => {\r\n    const options = customizationProps.items;\r\n    const node = dropdownContentRef.current;\r\n\r\n    if (!node) return;\r\n\r\n    const windowHeight = window.innerHeight;\r\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\r\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\r\n    setIsUp(instOffsetWithMenu >= windowHeight);\r\n  };\r\n\r\n  const setNewFocusedElement = (index: number) => {\r\n    const newFocusedElement = elRefs[index];\r\n    if (newFocusedElement) {\r\n      setFocused(index);\r\n      newFocusedElement?.current?.focus();\r\n    }\r\n  };\r\n\r\n  const getFilteredItems = () => {\r\n    const filtrationString = (filter ?? '').toUpperCase();\r\n    return customizationProps.items.filter((x) => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (isOpen) {\r\n      if (e.keyCode === 38) {\r\n        e.preventDefault();\r\n        var focusedNow = focused;\r\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\r\n          const filtered = getFilteredItems();\r\n          for (let i = focusedNow - 1; i > 0; i--) {\r\n            if (!filtered[i - 1]?.disabled) {\r\n              focusedNow = i;\r\n              break;\r\n            }\r\n          }\r\n          setNewFocusedElement(focusedNow);\r\n        }\r\n      } else if (e.keyCode === 40) {\r\n        e.preventDefault();\r\n        var focusedNow = focused;\r\n        if (focusedNow !== undefined && focusedNow !== null) {\r\n          const filtered = getFilteredItems();\r\n          for (let i = focusedNow + 1; i <= filtered.length; i++) {\r\n            if (!filtered[i - 1]?.disabled) {\r\n              focusedNow = i;\r\n              break;\r\n            }\r\n          }\r\n        } else {\r\n          focusedNow = haveTopItem() ? 0 : 1;\r\n        }\r\n        setNewFocusedElement(focusedNow);\r\n      } else if (e.keyCode === 9) {\r\n        e.preventDefault();\r\n        var focusedNow = focused;\r\n        if (focusedNow !== undefined && focusedNow !== null) {\r\n          focusedNow++;\r\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\r\n          if (!newFocusedElement) {\r\n            setNewFocusedElement(0);\r\n          } else {\r\n            setNewFocusedElement(focusedNow);\r\n          }\r\n        } else {\r\n          setFocused(null);\r\n        }\r\n      } else if (e.keyCode === 27) {\r\n        setIsOpen(false);\r\n        setFocused(null);\r\n\r\n        //TODO: add onEscapehandler\r\n        /*\r\n        if (!list.includes(input)) {\r\n          setInput('');\r\n          setPlaceholderSearch(placeholder || '');\r\n        }\r\n        styledFieldRef.current?.focus(); */\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some((x) => x?.current?.contains(e.target))) {\r\n      if (isOpen) {\r\n        setIsOpen(false);\r\n        setFocused(null);\r\n      }\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    document.addEventListener('keydown', handleKeyDown);\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown);\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  const scrollPosition = React.useRef<number | undefined>(0);\r\n  const handleScroll = () => {\r\n    scrollPosition.current = itemsListRef.current?.scrollTop;\r\n  };\r\n  useLayoutEffect(() => {\r\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\r\n  }, [selectedValues]);\r\n\r\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\r\n    switch (customizationProps.itemsType) {\r\n      case 'normal':\r\n        return (ref as React.RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();\r\n      default:\r\n        return (ref as React.RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\r\n    }\r\n  };\r\n\r\n  const arrLength = getFilteredItems().length;\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    setElRefs((elRefs) =>\r\n      Array(arrLength + 1)\r\n        .fill(null)\r\n        .map((_, i) => getCorrectRef(elRefs[i])),\r\n    );\r\n  }, [isOpen, arrLength, selectedValues]);\r\n\r\n  React.useEffect(() => {\r\n    determineDropUp();\r\n  }, [isOpen]);\r\n\r\n  const haveTopItem = () => {\r\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\r\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\r\n    else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\r\n    return false;\r\n  };\r\n\r\n  const getSuggestions = () => {\r\n    return getFilteredItems().filter((x) => x.suggestion);\r\n  };\r\n\r\n  React.useLayoutEffect(() => {\r\n    if (isOpen && (focused || focused == 0)) {\r\n      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\r\n      if (focusThis != focused) setFocused(focusThis);\r\n      const newFocusedElement = elRefs[focusThis];\r\n      newFocusedElement?.current?.focus();\r\n    } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item\r\n  }, [isOpen]);\r\n\r\n  const handleItemClick = (selected: boolean, item: DropdownItem) => {\r\n      let newValue: string[] = [];\r\n      if (customizationProps.multiSelect) {\r\n        if (selected) newValue = [...selectedValues, item.value];\r\n        else newValue = selectedValues.filter((x) => x != item.value);\r\n      } else newValue = selected ? [item.value] : [];\r\n\r\n      setSelectedValues(newValue);\r\n      if(customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue))\r\n        setIsOpen(false);\r\n  };\r\n\r\n  const getTopItem = () => {\r\n    if (!customizationProps.pinTopItem) return;\r\n    const visibleItems = getFilteredItems();\r\n    const allSelected = selectedValues?.filter((x) => visibleItems.some((y) => y.value == x)).length == visibleItems.length;\r\n    let showTopItem = false;\r\n    const suggestions = getSuggestions();\r\n    const displayLabel = selectedValues[0] ? customizationProps.items?.find((c) => c.value === selectedValues[0])?.displayLabel : undefined;\r\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\r\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\r\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\r\n\r\n    if (!showTopItem) return;\r\n\r\n    const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;\r\n   \r\n    return (\r\n      <TopItemContainer size={size}>\r\n        {customizationProps.itemsType == 'radio' && (\r\n          <RadioButton\r\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\r\n            iconPointerEventsTransparent={true}\r\n            select={() => {}} label={selectedFirst?.displayLabel ?? selectedFirst?.value} \r\n            size={size}\r\n            id={`${id}_topitem`}\r\n            selected={true}\r\n          />\r\n        )}\r\n        {customizationProps.itemsType == 'checkbox' && (\r\n          <Checkbox\r\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\r\n            select={(selected: boolean) => {\r\n              if (!customizationProps.multiSelect) return;\r\n\r\n              const newValues = selected ? visibleItems.map((x) => x.value) : [];\r\n              setSelectedValues(newValues);\r\n              if(customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues))\r\n                setIsOpen(false);\r\n            }}\r\n            iconPointerEventsTransparent={true}\r\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\r\n            size={size}\r\n            id={`${id}_checkbox_selectall`}\r\n            label={customizationProps.multiSelect ? 'Select all' : (selectedFirst?.displayLabel ?? selectedFirst?.value)}\r\n            selected={!customizationProps.multiSelect || allSelected}\r\n          />\r\n        )}\r\n        {customizationProps.itemsType == 'normal' && (\r\n          <>\r\n            {suggestions.map((x) => (\r\n            <button\r\n                ref={elRefs[0] as React.RefObject<HTMLButtonElement>}\r\n                type=\"button\"\r\n                id={`${id}_topitem`}\r\n                key={`${id}_topitem_${x.value}`}\r\n                onClick={(e: any) => {\r\n                  customizationProps.onValueUpdate([x.value]);\r\n                  setSelectedValues([x.value]);\r\n                  setIsOpen(false);\r\n                  setFocused(null);\r\n                }}>\r\n                <div className=\"item-content\">\r\n                  {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\r\n                  <div className=\"item-label\">\r\n                    {x?.displayLabel ?? x?.value}\r\n                    {x?.noteLabel && <div style={{ fontSize: '12px' }}>{x.noteLabel}</div>}\r\n                  </div>\r\n                </div>\r\n            </button>))}\r\n          </>\r\n        )}\r\n      </TopItemContainer>\r\n    );\r\n  };\r\n\r\n  const getElements = () => {\r\n    if (getFilteredItems().length === 0) {\r\n      return (\r\n        <ItemsContainer size={size}>\r\n          <button className=\"dropdownButton\" disabled>\r\n            <span>{messageOnNoResults}</span>\r\n          </button>\r\n        </ItemsContainer>\r\n      );\r\n    }\r\n    let number = 0;\r\n    return (\r\n      <ItemsContainer size={size}>\r\n        {getFilteredItems()\r\n          .filter((x) => x && (customizationProps.itemsType != 'normal' || !x.suggestion))\r\n          .map((item) => {\r\n            return (\r\n              <React.Fragment key={`key_${id}_${item.value}`}>\r\n              {item.customContent}\r\n              {!item.customContent && customizationProps.itemsType == 'radio' && (\r\n                  <RadioButton\r\n                    select={(selected:boolean) => handleItemClick(selected, item)}\r\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\r\n                    size={size}\r\n                    iconPointerEventsTransparent={true}\r\n                    disabled={item?.disabled}\r\n                    key={`key_${id}_${number++}`}\r\n                    id={`${id}_${number + 1}`}\r\n                    label={item.displayLabel ?? item.value}\r\n                    selected={selectedValues?.includes(item.value)}\r\n                  />\r\n                )}\r\n              {!item.customContent && customizationProps.itemsType == 'checkbox' && (\r\n                  <Checkbox\r\n                    select={(selected:boolean) => handleItemClick(selected, item)}\r\n                    iconPointerEventsTransparent={true}\r\n                    disabled={item?.disabled}\r\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\r\n                    size={size}\r\n                    key={`key_${id}_${number++}`}\r\n                    id={`${id}_${number + 1}`}\r\n                    label={item.displayLabel ?? item.value}\r\n                    selected={selectedValues?.includes(item.value)}\r\n                  />\r\n                )}\r\n              {!item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\r\n                  <button\r\n                    type=\"button\"\r\n                    disabled={item?.disabled}\r\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\r\n                    onClick={(e: any) => {\r\n                      customizationProps.onValueUpdate([item.value]);\r\n                      setSelectedValues([item.value]);\r\n                      setIsOpen(false);\r\n                      setFocused(null);\r\n                    }}\r\n                    className={ 'dropdownButton ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\r\n                    key={`key_${id}_${number++}`}\r\n                    id={`${id}_${number + 1}`}>\r\n                    {item.showDividerAbove && <div className=\"divider\" />}\r\n                    <div className=\"item-content\">\r\n                      {item.icon && <div className=\"item-icon\">{item.icon}</div>}\r\n                      <div className=\"item-label\">\r\n                        {item.displayLabel ?? item.value}\r\n                        {item.noteLabel && <div style={{ fontSize: '12px' }}>{item.noteLabel}</div>}\r\n                      </div>\r\n                    </div>\r\n                  </button>\r\n                )}\r\n              </React.Fragment>\r\n            );\r\n          })}\r\n      </ItemsContainer>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <DDContainer\r\n      ref={dropdownContentRef}\r\n      size={size}\r\n      width={width}\r\n      isButton={isButton}\r\n      alignLeft={alignLeft}\r\n      scrollable={customizationProps.scrollable}\r\n      maxHeight={customizationProps.maxHeight}\r\n      className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\r\n      <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\r\n            {customizationProps.menuContent &&\r\n              <MenuContentContainer size={size}>\r\n                {customizationProps.menuContent}\r\n                <DividerContainer size={size}>\r\n                  <div className=\"divider\" />\r\n                </DividerContainer>\r\n              </MenuContentContainer>}\r\n        {customizationProps.pinTopItem && getTopItem()}\r\n        {getElements()}\r\n      </ListContainer>\r\n      {customizationProps.action && customizationProps.actionLabel && (\r\n        <ActionButtonContainer size={size}>\r\n              <Button width=\"100%\" icon={customizationProps.actionIcon}\r\n                loading={customizationProps.actionLoading}\r\n                disabled={customizationProps.actionDisabled}\r\n                variant={customizationProps.actionVariant ?? 'primary'}\r\n                size={size} onClick={() => \r\n                {\r\n                  if(customizationProps.action()) //closing the dropdown if action returns 'true'\r\n                    setIsOpen(false);\r\n                }}>\r\n            {customizationProps.actionLabel}\r\n          </Button>\r\n        </ActionButtonContainer>\r\n      )}\r\n    </DDContainer>\r\n  );\r\n  /*  ),\r\n    {\r\n      handleClickOutside: () => () => {\r\n        if (isOpen) {\r\n          setIsOpen(false);\r\n          setFocused(null);\r\n        }\r\n      },\r\n    },\r\n  );\r\n\r\n  return <Wrapped />; */\r\n};\r\n\r\nexport default DropdownContent;\r\n"],"file":"DropdownContent.js"}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Size } from '../types';
+interface DropdownFilterItem {
+    label: string;
+    customContent?: React.ReactNode;
+}
+interface DropdownFilterProps {
+    id: string;
+    list: DropdownFilterItem[];
+    placeholder?: string;
+    onSelect?: (value: string) => void;
+    onInputChange?: (input: string) => void;
+    initalValue?: string;
+    required?: boolean;
+    disableSorting?: boolean;
+    messageOnNoResults?: string;
+    disabled?: boolean;
+    locked?: boolean;
+    isButton?: boolean;
+    activeValidationMessage?: string;
+    autofilledMessage?: string;
+    size?: Size.Small | Size.Medium;
+    scrollable?: boolean;
+    buttonFontSize?: string;
+    keepInitialValue?: boolean;
+    icon?: React.ReactNode;
+    margin?: string;
+}
+declare const DropdownFilter: ({ id, list, placeholder, onSelect, onInputChange, initalValue, required, disableSorting, messageOnNoResults, disabled, locked, scrollable, isButton, activeValidationMessage, autofilledMessage, size, buttonFontSize, keepInitialValue, icon, margin, }: DropdownFilterProps) => JSX.Element;
+export default DropdownFilter;

package/dist/js/Dropdown/DropdownFilter.js

@@ -0,0 +1,350 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _LoadingIndicator = require("../LoadingIndicator");
+
+var _CommonStyling = require("./CommonStyling");
+
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+
+var _types = require("../types");
+
+var _styling = require("../InputFields/styling");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var DropdownFilter = function DropdownFilter(_ref) {
+  var id = _ref.id,
+      list = _ref.list,
+      placeholder = _ref.placeholder,
+      onSelect = _ref.onSelect,
+      onInputChange = _ref.onInputChange,
+      initalValue = _ref.initalValue,
+      required = _ref.required,
+      disableSorting = _ref.disableSorting,
+      messageOnNoResults = _ref.messageOnNoResults,
+      disabled = _ref.disabled,
+      locked = _ref.locked,
+      scrollable = _ref.scrollable,
+      isButton = _ref.isButton,
+      activeValidationMessage = _ref.activeValidationMessage,
+      autofilledMessage = _ref.autofilledMessage,
+      size = _ref.size,
+      buttonFontSize = _ref.buttonFontSize,
+      keepInitialValue = _ref.keepInitialValue,
+      icon = _ref.icon,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isLoading = _React$useState4[0],
+      setIsLoading = _React$useState4[1];
+
+  var _React$useState5 = React.useState(initalValue !== null && initalValue !== void 0 ? initalValue : ''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      input = _React$useState6[0],
+      setInput = _React$useState6[1];
+
+  var _React$useState7 = React.useState(placeholder || ''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      placeholderSearch = _React$useState8[0],
+      setPlaceholderSearch = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      restartFilter = _React$useState10[0],
+      setRestartFilter = _React$useState10[1];
+
+  var _React$useState11 = React.useState([]),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      selectedValues = _React$useState12[0],
+      setSelectedValues = _React$useState12[1];
+
+  var _React$useState13 = React.useState(null),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      focused = _React$useState14[0],
+      setFocused = _React$useState14[1];
+
+  var styledFieldRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13 && !locked) {
+        var matches = list === null || list === void 0 ? void 0 : list.filter(function (c) {
+          return c.label.toLowerCase() === input.toLowerCase();
+        });
+
+        if (matches.length === 1 && onSelect) {
+          onSelect(matches[0].label);
+          setInput(matches[0].label);
+        }
+
+        if (!isOpen) setFocused(0);
+        setIsOpen(!isOpen);
+
+        if (matches.length === 0) {
+          setInput('');
+        }
+      } else if (e.keyCode === 40) {
+        if (!isOpen) setFocused(0);
+        setIsOpen(!isOpen);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    if (initalValue || initalValue === '') {
+      setInput(initalValue);
+      setRestartFilter(true);
+    }
+  }, [initalValue]);
+  React.useEffect(function () {
+    if (!isOpen && !list.some(function (x) {
+      return x.label == input;
+    })) {
+      setInput('');
+      setPlaceholderSearch(placeholder || '');
+    }
+  }, [isOpen]);
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
+  React.useEffect(function () {
+    setIsLoading(false);
+    if (selectedValues.length > 0 && !list.some(function (x) {
+      return x.label == input;
+    })) setSelectedValues([]);
+
+    if (list.some(function (x) {
+      return x.label == input;
+    })) {
+      setSelectedValues([input]);
+      onSelect && onSelect(input);
+    }
+  }, [input]);
+
+  var renderStandardDropdown = function renderStandardDropdown() {
+    return /*#__PURE__*/React.createElement(_CommonStyling.StyledField, {
+      ref: styledFieldRef,
+      className: (isOpen ? 'expanded ' : '').concat(size ? size : ''),
+      onClick: function onClick(e) {
+        var _inputRef$current;
+
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      },
+      tabIndex: disabled || locked ? -1 : 0,
+      disabled: disabled || false,
+      locked: locked || false,
+      showValidationMessage: !!activeValidationMessage,
+      fontSize: buttonFontSize,
+      "data-testid": "otherdiv_".concat(id)
+    }, /*#__PURE__*/React.createElement(_CommonStyling.InputField, {
+      ref: inputRef,
+      autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
+      type: "search",
+      placeholder: placeholderSearch,
+      value: input,
+      className: size ? "".concat(size, " value") : 'value',
+      onChange: function onChange(e) {
+        if (!locked && !disabled) {
+          setRestartFilter(false);
+          setIsLoading(true);
+          setIsOpen(true);
+          setInput(e.target.value);
+
+          if (onInputChange) {
+            onInputChange(e.target.value || '');
+          }
+        }
+      },
+      onClick: function onClick(e) {
+        if (!locked && !disabled) {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        }
+      },
+      onFocus: function onFocus() {
+        return setPlaceholderSearch('');
+      },
+      onBlur: function onBlur() {
+        return setPlaceholderSearch(placeholder || '');
+      },
+      required: required,
+      tabIndex: disabled || locked ? -1 : 0,
+      disabled: disabled || false
+    }), isLoading ? /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
+      size: _types.Size.Small,
+      color: _styles.COLORS.neutral_600
+    }) : null, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      className: 'dropdown-arrow'
+    }, isOpen && !locked && !disabled ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropUp, {
+      size: "24px",
+      className: size ? size : ''
+    }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
+      size: "24px",
+      className: size ? size : ''
+    })));
+  };
+
+  var renderButtonDropdown = function renderButtonDropdown() {
+    return /*#__PURE__*/React.createElement(_CommonStyling.ButtonDropdownWrapper, {
+      onClick: function onClick(e) {
+        var _inputRef$current2;
+
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      },
+      disabled: disabled,
+      locked: locked
+    }, /*#__PURE__*/React.createElement(_CommonStyling.StyledField, {
+      ref: styledFieldRef,
+      className: (isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : ''),
+      tabIndex: disabled || locked ? -1 : 0,
+      disabled: disabled || false,
+      locked: locked || false,
+      showValidationMessage: !!activeValidationMessage,
+      fontSize: buttonFontSize
+    }, icon, /*#__PURE__*/React.createElement("div", {
+      className: 'value'
+    }, initalValue && keepInitialValue ? initalValue : input || placeholderSearch), isLoading ? /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
+      size: _types.Size.Small,
+      color: _styles.COLORS.neutral_600
+    }) : null, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      className: 'dropdown-arrow'
+    }, isOpen && !locked && !disabled ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropUp, {
+      size: "24px",
+      className: size ? size : ''
+    }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
+      size: "24px",
+      className: size ? size : ''
+    }))));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CommonStyling.Dropdown, {
+    isButton: isButton || false,
+    disabled: disabled,
+    locked: locked,
+    className: size ? size : '',
+    margin: margin
+  }, !isButton && renderStandardDropdown(), !!isButton && renderButtonDropdown(), !locked && !disabled && /*#__PURE__*/React.createElement(_DropdownContent.default, {
+    isOpen: isOpen,
+    messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+    selectedValues: selectedValues,
+    setSelectedValues: setSelectedValues,
+    hideOnClickOutside: true,
+    size: size !== null && size !== void 0 ? size : _types.Size.Small,
+    focused: focused,
+    setFocused: setFocused,
+    customizationProps: {
+      itemsType: 'normal',
+      scrollable: scrollable,
+      multiSelect: false,
+      action: function action() {},
+      onValueUpdate: function onValueUpdate(values) {
+        var _values$;
+
+        var val = (_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : '';
+        setRestartFilter(true);
+        setInput(val);
+      },
+      items: list.map(function (x) {
+        return {
+          value: x.label,
+          customContent: x.customContent
+        };
+      })
+    },
+    filter: !restartFilter ? input : '',
+    setIsOpen: setIsOpen,
+    alignLeft: false,
+    isButton: isButton || false,
+    id: "".concat(id, "_dropdowncontent")
+  })), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, {
+    className: size || ''
+  }, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+    size: "20px",
+    color: _styles.COLORS.warning_400
+  }), /*#__PURE__*/React.createElement("span", null, activeValidationMessage)), autofilledMessage && /*#__PURE__*/React.createElement(_styling.AutofilledMessage, {
+    className: size || ''
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Information, {
+    size: "20px",
+    color: _styles.COLORS.neutral_600
+  }), /*#__PURE__*/React.createElement("span", null, autofilledMessage)));
+};
+
+DropdownFilter.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  list: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    customContent: _propTypes.default.node
+  })).isRequired,
+  placeholder: _propTypes.default.string,
+  onSelect: _propTypes.default.func,
+  onInputChange: _propTypes.default.func,
+  initalValue: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  disableSorting: _propTypes.default.bool,
+  messageOnNoResults: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  locked: _propTypes.default.bool,
+  isButton: _propTypes.default.bool,
+  activeValidationMessage: _propTypes.default.string,
+  autofilledMessage: _propTypes.default.string,
+  scrollable: _propTypes.default.bool,
+  buttonFontSize: _propTypes.default.string,
+  keepInitialValue: _propTypes.default.bool,
+  icon: _propTypes.default.node,
+  margin: _propTypes.default.string
+};
+var _default = DropdownFilter;
+exports.default = _default;
+//# sourceMappingURL=DropdownFilter.js.map

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

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

package/dist/js/Dropdown/__tests__/DropdownFilter.test.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _index = require("../index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var list = [{
+  label: 'Contact'
+}, {
+  label: 'About'
+}, {
+  label: 'Base'
+}, {
+  label: 'Blog'
+}, {
+  label: 'Contact 3'
+}, {
+  label: 'Custom'
+}, {
+  label: 'Support'
+}, {
+  label: 'Tools'
+}];
+describe('<DropdownFilter />', function () {
+  it('Renders with no default value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByPlaceholderText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DropdownFilter, {
+              id: "Dropdown",
+              list: list,
+              placeholder: "Placeholder"
+            })), getByPlaceholderText = _render.getByPlaceholderText;
+            expect(getByPlaceholderText('Placeholder').value).toBe('');
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('Renders with required input if specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, getByPlaceholderText;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DropdownFilter, {
+              id: "Dropdown",
+              list: list,
+              placeholder: "Placeholder",
+              required: true
+            })), getByPlaceholderText = _render2.getByPlaceholderText;
+            expect(getByPlaceholderText('Placeholder').required).toBe(true);
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('Renders with inital value if specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var initialValue, _render3, getByPlaceholderText;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            initialValue = 'Contact';
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DropdownFilter, {
+              id: "Dropdown",
+              list: list,
+              placeholder: "Placeholder",
+              initalValue: initialValue
+            })), getByPlaceholderText = _render3.getByPlaceholderText;
+            expect(getByPlaceholderText('Placeholder').value).toBe(initialValue);
+
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});
+//# sourceMappingURL=DropdownFilter.test.js.map

package/dist/js/Dropdown/__tests__/DropdownFilter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Dropdown/__tests__/DropdownFilter.test.tsx"],"names":["list","label","describe","it","getByPlaceholderText","expect","value","toBe","required","initialValue"],"mappings":";;AAAA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,IAAI,GAAG,CAAC;AAACC,EAAAA,KAAK,EAAE;AAAR,CAAD,EACX;AAACA,EAAAA,KAAK,EAAE;AAAR,CADW,EAEX;AAACA,EAAAA,KAAK,EAAE;AAAR,CAFW,EAGX;AAACA,EAAAA,KAAK,EAAE;AAAR,CAHW,EAIX;AAACA,EAAAA,KAAK,EAAE;AAAR,CAJW,EAKX;AAACA,EAAAA,KAAK,EAAE;AAAR,CALW,EAMX;AAACA,EAAAA,KAAK,EAAE;AAAR,CANW,EAOX;AAACA,EAAAA,KAAK,EAAE;AAAR,CAPW,CAAb;AASAC,QAAQ,CAAC,oBAAD,EAAuB,YAAM;AACnCC,EAAAA,EAAE,CAAC,+BAAD,uEAAkC;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBACD,kCAAO,6BAAC,qBAAD;AAAgB,cAAA,EAAE,EAAC,UAAnB;AAA8B,cAAA,IAAI,EAAEH,IAApC;AAA0C,cAAA,WAAW,EAAC;AAAtD,cAAP,CADC,EAC1BI,oBAD0B,WAC1BA,oBAD0B;AAElCC,YAAAA,MAAM,CAAED,oBAAoB,CAAC,aAAD,CAArB,CAA0DE,KAA3D,CAAN,CAAwEC,IAAxE,CAA6E,EAA7E;;AAFkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAlC,GAAF;AAKAJ,EAAAA,EAAE,CAAC,0CAAD,uEAA6C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACZ,kCAAO,6BAAC,qBAAD;AAAgB,cAAA,EAAE,EAAC,UAAnB;AAA8B,cAAA,IAAI,EAAEH,IAApC;AAA0C,cAAA,WAAW,EAAC,aAAtD;AAAoE,cAAA,QAAQ;AAA5E,cAAP,CADY,EACrCI,oBADqC,YACrCA,oBADqC;AAE7CC,YAAAA,MAAM,CAAED,oBAAoB,CAAC,aAAD,CAArB,CAA0DI,QAA3D,CAAN,CAA2ED,IAA3E,CAAgF,IAAhF;;AAF6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7C,GAAF;AAKAJ,EAAAA,EAAE,CAAC,wCAAD,uEAA2C;AAAA;;AAAA;AAAA;AAAA;AAAA;AACrCM,YAAAA,YADqC,GACtB,SADsB;AAAA,uBAEV,kCAAO,6BAAC,qBAAD;AAAgB,cAAA,EAAE,EAAC,UAAnB;AAA8B,cAAA,IAAI,EAAET,IAApC;AAA0C,cAAA,WAAW,EAAC,aAAtD;AAAoE,cAAA,WAAW,EAAES;AAAjF,cAAP,CAFU,EAEnCL,oBAFmC,YAEnCA,oBAFmC;AAG3CC,YAAAA,MAAM,CAAED,oBAAoB,CAAC,aAAD,CAArB,CAA0DE,KAA3D,CAAN,CAAwEC,IAAxE,CAA6EE,YAA7E;;AAH2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA3C,GAAF;AAKD,CAhBO,CAAR","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport { DropdownFilter } from '../index';\r\n\r\nconst list = [{label: 'Contact'}, \r\n  {label: 'About'}, \r\n  {label: 'Base'},\r\n  {label: 'Blog'}, \r\n  {label: 'Contact 3'}, \r\n  {label: 'Custom'}, \r\n  {label: 'Support'}, \r\n  {label: 'Tools'}];\r\n\r\ndescribe('<DropdownFilter />', () => {\r\n  it('Renders with no default value', async () => {\r\n    const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" />);\r\n    expect((getByPlaceholderText('Placeholder') as HTMLInputElement).value).toBe('');\r\n  });\r\n\r\n  it('Renders with required input if specified', async () => {\r\n    const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" required />);\r\n    expect((getByPlaceholderText('Placeholder') as HTMLInputElement).required).toBe(true);\r\n  });\r\n\r\n  it('Renders with inital value if specified', async () => {\r\n    const initialValue = 'Contact';\r\n    const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" initalValue={initialValue} />);\r\n    expect((getByPlaceholderText('Placeholder') as HTMLInputElement).value).toBe(initialValue);\r\n  });\r\n});\r\n"],"file":"DropdownFilter.test.js"}