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

package/dist/esm/Dropdown/DropdownContent.js

@@ -10,9 +10,10 @@ export const DDContainer = styled.div`
   display: none;
   position: absolute;
   background-color: ${COLORS.white};
-  width: 100%;
+  
+  width: ${props => props.width ? props.width : '100%'};
   z-index: 1;
-  margin-top: ${props => props.isButton ? '-4px' : '2px'};
+  margin: ${props => props.isButton ? '-4px' : '4px 0px'};
 
   &.show {
     display: flex;
@@ -32,7 +33,10 @@ export const DDContainer = styled.div`
   border: 1px solid ${COLORS.neutral_100};
   box-sizing: border-box;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
-  padding: 4px 0;
+  padding-top: 4px;
+  padding-right: 0px;
+  padding-bottom: 4px;
+  padding-left: 0px;
 
   min-width: ${props => props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'};
   border-radius: ${props => props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px'};
@@ -41,7 +45,7 @@ export const DDContainer = styled.div`
 `;
 const ListContainer = styled.div`
   ${props => props.scrollable ? 'overflow-y: scroll;' : ''}
-  ${props => props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : ''}
+  ${props => props.itemsType != 'normal' ? 'margin-left: 4px;' : ''}
 
   div {
     padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'};
@@ -51,17 +55,19 @@ const ListContainer = styled.div`
   /* width */
   ::-webkit-scrollbar {
     width: 4px;
+    margin: 0 6px;
     cursor: pointer;
   }
 
   /* Track */
   ::-webkit-scrollbar-track {
     background: ${COLORS.neutral_100};
+    border-radius: 8px;
   }
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    background: ${COLORS.neutral_300};
+    background: ${COLORS.neutral_600};
     border-radius: 8px;
   }
 
@@ -71,14 +77,12 @@ const ListContainer = styled.div`
   }
 `;
 const ItemsContainer = styled.div`
-  padding: 4px;
 `;
 const TopItemContainer = styled.div`
   border-bottom-style: solid;
   border-bottom-color: ${COLORS.neutral_200};
   border-bottom-width: 1px;
-  margin-right: 22px;
-  padding-left: 4px;
+  margin-right: 22px;  
 `;
 const ActionButtonContainer = styled.div`
   border-top-style: solid;
@@ -101,19 +105,20 @@ const DropdownContent = ({
   size,
   isOpen,
   hideOnClickOutside,
+  width,
   setIsOpen,
   filter,
+  focused,
+  setFocused,
   selectedValues,
   setSelectedValues,
   messageOnNoResults
 }) => {
-  const [focused, setFocused] = React.useState(null);
   const [isUp, setIsUp] = React.useState(false);
   const dropdownContentRef = React.useRef(null);
+  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
+  if (!size) size = Size.Small;
   const itemsListRef = React.useRef(null);
-  React.useEffect(() => {
-    determineDropUp();
-  }, [isOpen]);
 
   const determineDropUp = () => {
     const options = customizationProps.items;
@@ -231,14 +236,36 @@ const DropdownContent = ({
   const [elRefs, setElRefs] = React.useState([]);
   React.useEffect(() => {
     setElRefs(elRefs => Array(arrLength + 1).fill(null).map((_, i) => getCorrectRef(elRefs[i])));
-  }, [arrLength, selectedValues]);
+  }, [isOpen, arrLength, selectedValues]);
+  React.useEffect(() => {
+    determineDropUp();
+  }, [isOpen]);
+
+  const haveTopItem = () => {
+    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;
+    return false;
+  };
+
+  const getSuggestions = () => {
+    return getFilteredItems().filter(x => x.suggestion);
+  };
+
+  React.useLayoutEffect(() => {
+    if (isOpen && (focused || focused == 0)) {
+      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
+      if (focusThis != focused) setFocused(focusThis);
+      const newFocusedElement = elRefs[focusThis];
+      console.log(newFocusedElement);
+      newFocusedElement?.current?.focus();
+    }
+  }, [isOpen]);
 
   const getTopItem = () => {
     if (!customizationProps.pinTopItem) return;
     const visibleItems = getFilteredItems();
     const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;
     let showTopItem = false;
-    const suggestions = getFilteredItems().filter(x => x.suggestion);
+    const suggestions = getSuggestions();
     if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
     if (!showTopItem) return;
     return /*#__PURE__*/React.createElement(TopItemContainer, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/React.createElement(RadioButton, {
@@ -339,10 +366,12 @@ const DropdownContent = ({
           setIsOpen(false);
           setFocused(null);
         },
-        className: selectedValues?.includes(item.value) ? 'active' : '',
+        className: (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : ''),
         key: `key_${id}_${number++}`,
         id: `${id}_${number + 1}`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, item.showDividerAbove && /*#__PURE__*/React.createElement("div", {
+        className: "divider"
+      }), /*#__PURE__*/React.createElement("div", {
         className: "item-content"
       }, item.icon && /*#__PURE__*/React.createElement("div", {
         className: "item-icon"
@@ -356,9 +385,10 @@ const DropdownContent = ({
     }));
   };
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DDContainer, {
+  return /*#__PURE__*/React.createElement(DDContainer, {
     ref: dropdownContentRef,
     size: size,
+    width: width,
     isButton: isButton,
     alignLeft: alignLeft,
     scrollable: customizationProps.scrollable,
@@ -375,7 +405,7 @@ const DropdownContent = ({
     variant: "primary",
     size: size,
     onClick: () => customizationProps.action()
-  }, customizationProps.actionLabel))));
+  }, customizationProps.actionLabel)));
   /*  ),
     {
       handleClickOutside: () => () => {
@@ -399,13 +429,13 @@ DropdownContent.propTypes = {
     actionLabel: _pt.string,
     action: _pt.func.isRequired,
     pinTopItem: _pt.bool,
-    isButton: _pt.bool.isRequired,
     onValueUpdate: _pt.func.isRequired,
     items: _pt.arrayOf(_pt.shape({
       value: _pt.string.isRequired,
       displayLabel: _pt.string,
       noteLabel: _pt.string,
       suggestion: _pt.bool,
+      showDividerAbove: _pt.bool,
       disabled: _pt.bool,
       icon: _pt.node
     })).isRequired
@@ -415,10 +445,13 @@ DropdownContent.propTypes = {
   setIsOpen: _pt.func.isRequired,
   id: _pt.string.isRequired,
   filter: _pt.string.isRequired,
+  width: _pt.string,
   hideOnClickOutside: _pt.bool.isRequired,
   selectedValues: _pt.arrayOf(_pt.string).isRequired,
   setSelectedValues: _pt.func.isRequired,
-  messageOnNoResults: _pt.string.isRequired
+  messageOnNoResults: _pt.string.isRequired,
+  focused: _pt.oneOfType([_pt.number, _pt.oneOf([null])]),
+  setFocused: _pt.func.isRequired
 };
 export default DropdownContent;
 //# sourceMappingURL=DropdownContent.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["React","useLayoutEffect","createRef","styled","Button","Size","ButtonDropdownContentStyling","DropdownButton","COLORS","Checkbox","RadioButton","DDContainer","div","white","props","isButton","alignLeft","neutral_100","size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_300","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","useState","isUp","setIsUp","dropdownContentRef","useRef","itemsListRef","useEffect","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","suggestion","multiSelect","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","join","action","actionLabel"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\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: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${props => (props.alignLeft ? 'left: 0px;' : '')}\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  padding: 4px 0;\n\n  min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_300};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n  padding: 4px;\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;\n  padding-left: 4px;\n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  isButton: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  setIsOpen,\n  filter,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults,\n}) => {\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n  \n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) ||x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [arrLength, selectedValues]);\n\n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getFilteredItems().filter(x => x.suggestion);\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={selectedValues?.includes(item.value) ? 'active' : ''}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <div>\n        <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>\n      </div>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["React","useLayoutEffect","createRef","styled","Button","Size","ButtonDropdownContentStyling","DropdownButton","COLORS","Checkbox","RadioButton","DDContainer","div","white","props","width","isButton","alignLeft","neutral_100","size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_600","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","isUp","setIsUp","useState","dropdownContentRef","useRef","Small","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","haveTopItem","multiSelect","getSuggestions","suggestion","focusThis","console","log","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","showDividerAbove","join","action","actionLabel"],"mappings":";AAAA,OAAOA,KAAP,IAAgBC,eAAhB,EAA0CC,SAA1C,QAA2D,OAA3D;AACA,OAAOC,MAAP,MAA4B,mBAA5B;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,4BAAT,EAAuCC,cAAvC,QAA6D,iBAA7D;AACA,SAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,gBAAtC;AAEA,OAAO,MAAMC,WAAW,GAAGR,MAAM,CAACS,GAAuH;AACzJ;AACA;AACA,sBAAsBJ,MAAM,CAACK,KAAM;AACnC;AACA,WAAWC,KAAK,IAAIA,KAAK,CAACC,KAAN,GAAcD,KAAK,CAACC,KAApB,GAA4B,MAAO;AACvD;AACA,YAAYD,KAAK,IAAKA,KAAK,CAACE,QAAN,GAAiB,MAAjB,GAA0B,SAAW;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIF,KAAK,IAAKA,KAAK,CAACG,SAAN,GAAkB,YAAlB,GAAiC,EAAI;AACnD;AACA,IAAIH,KAAK,IAAKA,KAAK,CAACE,QAAN,GAAiBV,4BAAjB,GAAgD,EAAI;AAClE;AACA,sBAAsBE,MAAM,CAACU,WAAY;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,KAAK,IAAKA,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACe,KAAnB,GAA2B,OAA3B,GAAqCN,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACgB,MAAnB,GAA4B,OAA5B,GAAsC,OAAS;AAC7G,mBAAmBP,KAAK,IAAKA,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACe,KAAnB,GAA2B,MAA3B,GAAoCN,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACgB,MAAnB,GAA4B,KAA5B,GAAoC,KAAO;AAC5G;AACA,gBAAgBP,KAAK,IAAK,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6BR,KAAK,CAACS,SAAN,GAAkBT,KAAK,CAACS,SAAxB,GAAoCT,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACe,KAAnB,GAA2B,OAA3B,GAAqCN,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACgB,MAAnB,GAA4B,OAA5B,GAAsC,OAAS;AAC/K,CApCO;AAsCP,MAAMG,aAAa,GAAGrB,MAAM,CAACS,GAAgE;AAC7F,IAAIE,KAAK,IAAKA,KAAK,CAACQ,UAAN,GAAmB,qBAAnB,GAA2C,EAAI;AAC7D,IAAIR,KAAK,IAAKA,KAAK,CAACW,SAAN,IAAmB,QAAnB,GAA8B,mBAA9B,GAAoD,EAAI;AACtE;AACA;AACA,mBAAmBX,KAAK,IAAIA,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACe,KAAnB,GAA2B,KAA3B,GAAmCN,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACgB,MAAnB,GAA4B,KAA5B,GAAoC,KAAO;AAC1G,sBAAsBP,KAAK,IAAIA,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACe,KAAnB,GAA2B,KAA3B,GAAmCN,KAAK,CAACK,IAAN,IAAcd,IAAI,CAACgB,MAAnB,GAA4B,KAA5B,GAAoC,KAAO;AAC7G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBb,MAAM,CAACU,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,kBAAkBV,MAAM,CAACkB,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,kBAAkBlB,MAAM,CAACmB,WAAY;AACrC;AACA,CAhCA;AAkCA,MAAMC,cAAc,GAAGzB,MAAM,CAACS,GAAI;AAClC,CADA;AAIA,MAAMiB,gBAAgB,GAAG1B,MAAM,CAACS,GAAI;AACpC;AACA,yBAAyBJ,MAAM,CAACsB,WAAY;AAC5C;AACA;AACA,CALA;AAOA,MAAMC,qBAAqB,GAAG5B,MAAM,CAACS,GAAI;AACzC;AACA,sBAAsBJ,MAAM,CAACsB,WAAY;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,MAAME,eAAe,GAAG,GAAxB;AACA,MAAMC,iBAAiB,GAAG,EAA1B;;AA0CA,MAAMC,eAAuD,GAAG,CAAC;AAC/DC,EAAAA,EAD+D;AAE/DC,EAAAA,kBAF+D;AAG/DnB,EAAAA,SAH+D;AAI/DD,EAAAA,QAJ+D;AAK/DG,EAAAA,IAL+D;AAM/DkB,EAAAA,MAN+D;AAO/DC,EAAAA,kBAP+D;AAQ/DvB,EAAAA,KAR+D;AAS/DwB,EAAAA,SAT+D;AAU/DC,EAAAA,MAV+D;AAW/DC,EAAAA,OAX+D;AAY/DC,EAAAA,UAZ+D;AAa/DC,EAAAA,cAb+D;AAc/DC,EAAAA,iBAd+D;AAe/DC,EAAAA;AAf+D,CAAD,KAgB1D;AACJ,QAAM,CAACC,IAAD,EAAOC,OAAP,IAAkB/C,KAAK,CAACgD,QAAN,CAAwB,KAAxB,CAAxB;AACA,QAAMC,kBAAkB,GAAGjD,KAAK,CAACkD,MAAN,CAA6B,IAA7B,CAA3B;AAEA,MAAG,CAACd,kBAAkB,CAACX,SAAvB,EAAkCW,kBAAkB,CAACX,SAAnB,GAA+B,QAA/B;AAClC,MAAG,CAACN,IAAJ,EAAUA,IAAI,GAAGd,IAAI,CAAC8C,KAAZ;AAEV,QAAMC,YAAY,GAAGpD,KAAK,CAACkD,MAAN,CAA6B,IAA7B,CAArB;;AAEA,QAAMG,eAAe,GAAG,MAAM;AAC5B,UAAMC,OAAO,GAAGlB,kBAAkB,CAACmB,KAAnC;AACA,UAAMC,IAAI,GAAGP,kBAAkB,CAACQ,OAAhC;AAEA,QAAI,CAACD,IAAL,EAAW;AAEX,UAAME,YAAY,GAAGC,MAAM,CAACC,WAA5B;AACA,UAAMC,UAAU,GAAGC,IAAI,CAACC,GAAL,CAAS/B,eAAT,EAA0BsB,OAAO,CAACU,MAAR,GAAiB/B,iBAA3C,CAAnB;AACA,UAAMgC,kBAAkB,GAAGT,IAAI,CAACU,qBAAL,GAA6BC,GAA7B,GAAmCN,UAA9D;AACAd,IAAAA,OAAO,CAACkB,kBAAkB,IAAIP,YAAvB,CAAP;AACD,GAVD;;AAYA,QAAMU,oBAAoB,GAAIC,KAAD,IAAmB;AAC9C,UAAMC,iBAAiB,GAAGC,MAAM,CAACF,KAAD,CAAhC;;AACA,QAAIC,iBAAJ,EAAuB;AACrB5B,MAAAA,UAAU,CAAC2B,KAAD,CAAV;AACAC,MAAAA,iBAAiB,EAAEb,OAAnB,EAA4Be,KAA5B;AACD;AACF,GAND;;AAQA,QAAMC,aAAa,GAAIC,CAAD,IAAY;AAChC,QAAIrC,MAAJ,EAAY;AACV,UAAIqC,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBD,QAAAA,CAAC,CAACE,cAAF;AACA,YAAIC,UAAU,GAAGpC,OAAjB;;AACA,YAAIoC,UAAU,KAAKC,SAAf,IAA4BD,UAAU,KAAK,IAA3C,IAAmDA,UAAU,GAAG,CAApE,EAAuE;AACrEA,UAAAA,UAAU,IAAI,CAAd;AACAT,UAAAA,oBAAoB,CAACS,UAAD,CAApB;AACD;AACF,OAPD,MAOO,IAAIH,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AAC3BD,QAAAA,CAAC,CAACE,cAAF;AACA,YAAIC,UAAU,GAAGpC,OAAjB;;AACA,YAAIoC,UAAU,KAAKC,SAAf,IAA4BD,UAAU,KAAK,IAA/C,EAAqD;AACnDA,UAAAA,UAAU;AACX,SAFD,MAEO;AACLA,UAAAA,UAAU,GAAG,CAAb;AACD;;AACDT,QAAAA,oBAAoB,CAACS,UAAD,CAApB;AACD,OATM,MASA,IAAIH,CAAC,CAACC,OAAF,KAAc,CAAlB,EAAqB;AAC1BD,QAAAA,CAAC,CAACE,cAAF;AACA,YAAIC,UAAU,GAAGpC,OAAjB;;AACA,YAAIoC,UAAU,KAAKC,SAAf,IAA4BD,UAAU,KAAK,IAA/C,EAAqD;AACnDA,UAAAA,UAAU;AACV,gBAAMP,iBAAiB,GAAGS,QAAQ,CAACC,cAAT,CAAyB,GAAE7C,EAAG,IAAG0C,UAAW,EAA5C,CAA1B;;AACA,cAAI,CAACP,iBAAL,EAAwB;AACtBF,YAAAA,oBAAoB,CAAC,CAAD,CAApB;AACD,WAFD,MAEO;AACLA,YAAAA,oBAAoB,CAACS,UAAD,CAApB;AACD;AACF,SARD,MAQO;AACLT,UAAAA,oBAAoB,CAAC,CAAD,CAApB;AACD;AACF,OAdM,MAcA,IAAIM,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AAC3BpC,QAAAA,SAAS,CAAC,KAAD,CAAT;AACA6B,QAAAA,oBAAoB,CAAC,CAAD,CAApB,CAF2B,CAI3B;;AACA;AACR;AACA;AACA;AACA;AACA;AACO;AACF;AACF,GA7CD;;AA+CA,QAAMa,kBAAkB,GAAIP,CAAD,IAAY;AACrC,QAAIpC,kBAAkB,IAAIW,kBAAkB,EAAEQ,OAA1C,IAAqD,CAACR,kBAAkB,CAACQ,OAAnB,CAA2ByB,QAA3B,CAAoCR,CAAC,CAACS,MAAtC,CAAtD,IAAuG,CAACZ,MAAM,CAACa,IAAP,CAAYC,CAAC,IAAIA,CAAC,EAAE5B,OAAH,EAAYyB,QAAZ,CAAqBR,CAAC,CAACS,MAAvB,CAAjB,CAA5G,EAA8J;AAC5J,UAAI9C,MAAJ,EAAY;AACVE,QAAAA,SAAS,CAAC,KAAD,CAAT;AACAG,QAAAA,UAAU,CAAC,IAAD,CAAV;AACD;AACF;AACF,GAPD;;AASA1C,EAAAA,KAAK,CAACsF,SAAN,CAAgB,MAAM;AACpBP,IAAAA,QAAQ,CAACQ,gBAAT,CAA0B,SAA1B,EAAqCd,aAArC;AACAM,IAAAA,QAAQ,CAACQ,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACA,WAAO,MAAM;AACXF,MAAAA,QAAQ,CAACS,mBAAT,CAA6B,SAA7B,EAAwCf,aAAxC;AACAM,MAAAA,QAAQ,CAACS,mBAAT,CAA6B,OAA7B,EAAsCP,kBAAtC;AACD,KAHD;AAID,GAPD;AASA,QAAMQ,cAAc,GAAGzF,KAAK,CAACkD,MAAN,CAAiC,CAAjC,CAAvB;;AACA,QAAMwC,YAAY,GAAG,MAAM;AACzBD,IAAAA,cAAc,CAAChC,OAAf,GAAyBL,YAAY,CAACK,OAAb,EAAsBkC,SAA/C;AACD,GAFD;;AAGA1F,EAAAA,eAAe,CAAC,MAAM;AACpB,QAAImD,YAAY,CAACK,OAAjB,EAA0BL,YAAY,CAACK,OAAb,CAAqBkC,SAArB,GAAiCF,cAAc,CAAChC,OAAf,IAA0B,CAA3D;AAC3B,GAFc,EAEZ,CAACd,cAAD,CAFY,CAAf;;AAIA,QAAMiD,gBAAgB,GAAG,MAAM;AAC7B,UAAMC,gBAAgB,GAAG,CAACrD,MAAM,IAAI,EAAX,EAAesD,WAAf,EAAzB;AACA,WAAO1D,kBAAkB,CAACmB,KAAnB,CACLf,MADK,CACE6C,CAAC,IAAIA,CAAC,EAAEU,KAAH,EAAUD,WAAV,GAAwBE,QAAxB,CAAiCH,gBAAjC,KAAsDR,CAAC,EAAEY,YAAH,EAAiBH,WAAjB,GAA+BE,QAA/B,CAAwCH,gBAAxC,CAD7D,CAAP;AAED,GAJD;;AAMA,QAAMK,aAAa,GAAIC,GAAD,IAAqE;AACzF,YAAO/D,kBAAkB,CAACX,SAA1B;AAEE,WAAK,QAAL;AACE,eAAO0E,GAAG,iBAA0CjG,SAAS,EAA7D;;AACF;AACE,eAAOiG,GAAG,iBAAuCjG,SAAS,EAA1D;AALJ;AAOD,GARD;;AAUA,QAAMkG,SAAS,GAAGR,gBAAgB,GAAG5B,MAArC;AACA,QAAM,CAACO,MAAD,EAAS8B,SAAT,IAAsBrG,KAAK,CAACgD,QAAN,CAA+C,EAA/C,CAA5B;AAEAhD,EAAAA,KAAK,CAACsF,SAAN,CAAgB,MAAM;AACpBe,IAAAA,SAAS,CAAC9B,MAAM,IACd+B,KAAK,CAACF,SAAS,GAAG,CAAb,CAAL,CAAqBG,IAArB,CAA0B,IAA1B,EACGC,GADH,CACO,CAACC,CAAD,EAAIC,CAAJ,KAAUR,aAAa,CAAC3B,MAAM,CAACmC,CAAD,CAAP,CAD9B,CADO,CAAT;AAGD,GAJD,EAIG,CAACrE,MAAD,EAAS+D,SAAT,EAAoBzD,cAApB,CAJH;AAMA3C,EAAAA,KAAK,CAACsF,SAAN,CAAgB,MAAM;AACpBjC,IAAAA,eAAe;AAChB,GAFD,EAEG,CAAChB,MAAD,CAFH;;AAKA,QAAMsE,WAAW,GAAG,MAAM;AACxB,QAAIvE,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,IAA2CkB,cAA3C,IAA6DA,cAAc,EAAEqB,MAAhB,GAAyB,CAA1F,EAA6F,OAAO,IAAP,CAA7F,KACK,IAAI5B,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,KAA+CW,kBAAkB,CAACwE,WAAnB,IAAkCjE,cAAc,EAAEqB,MAAhB,GAAyB,CAA1G,CAAJ,EAAkH,OAAO,IAAP,CAAlH,KACA,IAAI5B,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4CoF,cAAc,IAAI7C,MAAlB,GAA2B,CAA3E,EAA8E,OAAO,IAAP;AACnF,WAAO,KAAP;AACD,GALD;;AAOA,QAAM6C,cAAc,GAAG,MAAM;AAC3B,WAAOjB,gBAAgB,GAAGpD,MAAnB,CAA0B6C,CAAC,IAAIA,CAAC,CAACyB,UAAjC,CAAP;AACD,GAFD;;AAIA9G,EAAAA,KAAK,CAACC,eAAN,CAAsB,MAAM;AAC1B,QAAIoC,MAAM,KAAKI,OAAO,IAAIA,OAAO,IAAI,CAA3B,CAAV,EAAyC;AACvC,YAAMsE,SAAS,GAAGtE,OAAO,IAAI,CAAX,IAAgB,CAACkE,WAAW,EAA5B,GAAiC,CAAjC,GAAqClE,OAAvD;AACA,UAAGsE,SAAS,IAAItE,OAAhB,EACEC,UAAU,CAACqE,SAAD,CAAV;AACF,YAAMzC,iBAAiB,GAAGC,MAAM,CAACwC,SAAD,CAAhC;AACAC,MAAAA,OAAO,CAACC,GAAR,CAAY3C,iBAAZ;AACAA,MAAAA,iBAAiB,EAAEb,OAAnB,EAA4Be,KAA5B;AACD;AACF,GATD,EASG,CAACnC,MAAD,CATH;;AAaA,QAAM6E,UAAU,GAAG,MAAM;AACvB,QAAI,CAAC9E,kBAAkB,CAAC+E,UAAxB,EAAoC;AACpC,UAAMC,YAAY,GAAGxB,gBAAgB,EAArC;AACA,UAAMyB,WAAW,GAAG1E,cAAc,EAAEH,MAAhB,CAAuB6C,CAAC,IAAI+B,YAAY,CAAChC,IAAb,CAAkBkC,CAAC,IAAIA,CAAC,CAACvB,KAAF,IAAWV,CAAlC,CAA5B,EAAkErB,MAAlE,IAA4EoD,YAAY,CAACpD,MAA7G;AACA,QAAIuD,WAAW,GAAG,KAAlB;AACA,UAAMC,WAAW,GAAGX,cAAc,EAAlC;AAEA,QAAIzE,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,IAA2CkB,cAA3C,IAA6DA,cAAc,EAAEqB,MAAhB,GAAyB,CAA1F,EAA6FuD,WAAW,GAAG,IAAd,CAA7F,KACK,IAAInF,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,KAA+CW,kBAAkB,CAACwE,WAAnB,IAAkCjE,cAAc,EAAEqB,MAAhB,GAAyB,CAA1G,CAAJ,EAAkHuD,WAAW,GAAG,IAAd,CAAlH,KACA,IAAInF,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4C+F,WAAW,CAACxD,MAAZ,GAAqB,CAArE,EAAwEuD,WAAW,GAAG,IAAd;AAE7E,QAAI,CAACA,WAAL,EAAkB;AAElB,wBACE,oBAAC,gBAAD,QACGnF,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,iBACC,oBAAC,WAAD;AACE,MAAA,GAAG,EAAE8C,MAAM,CAAC,CAAD,CADb;AAEE,MAAA,4BAA4B,EAAE,IAFhC;AAGE,MAAA,MAAM,EAAE,MAAM,CAAE,CAHlB;AAGoB,MAAA,IAAI,EAAEpD,IAH1B;AAGgC,MAAA,EAAE,EAAG,GAAEgB,EAAG,UAH1C;AAGqD,MAAA,KAAK,EAAEQ,cAAc,CAAC,CAAD,CAH1E;AAG+E,MAAA,QAAQ,EAAE;AAHzF,MAFJ,EAOGP,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,iBACC,oBAAC,QAAD;AACE,MAAA,GAAG,EAAE8C,MAAM,CAAC,CAAD,CADb;AAEE,MAAA,MAAM,EAAGkD,QAAD,IAAuB;AAC7B,YAAI,CAACrF,kBAAkB,CAACwE,WAAxB,EAAqC;AAErC,cAAMc,SAAS,GAAGD,QAAQ,GAAGL,YAAY,CAACZ,GAAb,CAAiBnB,CAAC,IAAIA,CAAC,CAACU,KAAxB,CAAH,GAAoC,EAA9D;AACAnD,QAAAA,iBAAiB,CAAC8E,SAAD,CAAjB;AACAtF,QAAAA,kBAAkB,CAACuF,aAAnB,IAAoCvF,kBAAkB,CAACuF,aAAnB,CAAiCD,SAAjC,CAApC;AACD,OARH;AASE,MAAA,4BAA4B,EAAE,IAThC;AAUE,MAAA,YAAY,EAAEtF,kBAAkB,CAACwE,WAAnB,IAAkC,CAACS,WAAnC,IAAkD1E,cAAc,EAAEqB,MAAhB,GAAyB,CAV3F;AAWE,MAAA,IAAI,EAAE7C,IAXR;AAYE,MAAA,EAAE,EAAG,GAAEgB,EAAG,qBAZZ;AAaE,MAAA,KAAK,EAAEC,kBAAkB,CAACwE,WAAnB,GAAiC,YAAjC,GAAgDjE,cAAc,CAAC,CAAD,CAbvE;AAcE,MAAA,QAAQ,EAAE,CAACP,kBAAkB,CAACwE,WAApB,IAAmCS;AAd/C,MARJ,EAyBGjF,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,iBACC,0CACC+F,WAAW,CAAChB,GAAZ,CAAgBnB,CAAC,iBAChB,oBAAC,cAAD;AAAgB,MAAA,GAAG,EAAEd,MAAM,CAAC,CAAD,CAA3B;AAAsE,MAAA,IAAI,EAAC,QAA3E;AAAoF,MAAA,EAAE,EAAG,GAAEpC,EAAG,UAA9F;AACE,MAAA,OAAO,EAAGuC,CAAD,IAAY;AACnBtC,QAAAA,kBAAkB,CAACuF,aAAnB,CAAiC,CAACtC,CAAC,CAACU,KAAH,CAAjC;AACAnD,QAAAA,iBAAiB,CAAC,CAACyC,CAAC,CAACU,KAAH,CAAD,CAAjB;AACAxD,QAAAA,SAAS,CAAC,KAAD,CAAT;AACAG,QAAAA,UAAU,CAAC,IAAD,CAAV;AACD;AANH,oBAOE;AAAK,MAAA,SAAS,EAAC;AAAf,OACG2C,CAAC,EAAEuC,IAAH,iBAAW;AAAK,MAAA,SAAS,EAAC;AAAf,OAA4BvC,CAAC,EAAEuC,IAA/B,CADd,eAEE;AAAK,MAAA,SAAS,EAAC;AAAf,OACGvC,CAAC,EAAEY,YAAH,IAAmBZ,CAAC,EAAEU,KADzB,EAEGV,CAAC,EAAEwC,SAAH,iBAAgB;AAAK,MAAA,KAAK,EAAE;AAACC,QAAAA,QAAQ,EAAE;AAAX;AAAZ,OAAiCzC,CAAC,CAACwC,SAAnC,CAFnB,CAFF,CAPF,CADD,CADD,CA1BJ,CADF;AAgDD,GA7DD;;AA+DA,QAAME,WAAW,GAAG,MAAM;AACxB,QAAInC,gBAAgB,GAAG5B,MAAnB,KAA8B,CAAlC,EAAqC;AACnC,0BACE,oBAAC,cAAD,qBACE,oBAAC,cAAD;AAAgB,QAAA,QAAQ;AAAxB,sBACE,kCAAOnB,kBAAP,CADF,CADF,CADF;AAOD;;AACD,QAAImF,MAAM,GAAG,CAAb;AACA,wBACE,oBAAC,cAAD,QACGpC,gBAAgB,GAAGpD,MAAnB,CAA0B6C,CAAC,IAAIA,CAAC,KAAKjD,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4C,CAAC4D,CAAC,CAACyB,UAApD,CAAhC,EAAiGN,GAAjG,CAAqGyB,IAAI,IAAI;AAC5G,0BACE,0CACG7F,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,iBACC,oBAAC,WAAD;AACE,QAAA,MAAM,EAAGgG,QAAD,IAAuB;AAC7B,cAAI,CAACA,QAAL,EAAe;AACfrF,UAAAA,kBAAkB,CAACuF,aAAnB,IAAoCvF,kBAAkB,CAACuF,aAAnB,CAAiC,CAACM,IAAI,CAAClC,KAAN,CAAjC,CAApC;AACAnD,UAAAA,iBAAiB,CAAC,CAACqF,IAAI,CAAClC,KAAN,CAAD,CAAjB;AACD,SALH;AAME,QAAA,GAAG,EAAExB,MAAM,CAACyD,MAAM,GAAG,CAAV,CANb;AAOE,QAAA,IAAI,EAAE7G,IAPR;AAQE,QAAA,4BAA4B,EAAE,IARhC;AASE,QAAA,QAAQ,EAAE8G,IAAI,EAAEC,QATlB;AAUE,QAAA,GAAG,EAAG,OAAM/F,EAAG,IAAG6F,MAAM,EAAG,EAV7B;AAWE,QAAA,EAAE,EAAG,GAAE7F,EAAG,IAAG6F,MAAM,GAAG,CAAE,EAX1B;AAYE,QAAA,KAAK,EAAEC,IAAI,CAAClC,KAZd;AAaE,QAAA,QAAQ,EAAEpD,cAAc,EAAEqD,QAAhB,CAAyBiC,IAAI,CAAClC,KAA9B;AAbZ,QAFJ,EAkBG3D,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,iBACC,oBAAC,QAAD;AACE,QAAA,MAAM,EAAGgG,QAAD,IAAuB;AAC7B,cAAIU,QAAkB,GAAG,EAAzB;;AACA,cAAI/F,kBAAkB,CAACwE,WAAvB,EAAoC;AAClC,gBAAIa,QAAJ,EAAcU,QAAQ,GAAG,CAAC,GAAGxF,cAAJ,EAAoBsF,IAAI,CAAClC,KAAzB,CAAX,CAAd,KACKoC,QAAQ,GAAGxF,cAAc,CAACH,MAAf,CAAsB6C,CAAC,IAAIA,CAAC,IAAI4C,IAAI,CAAClC,KAArC,CAAX;AACN,WAHD,MAGOoC,QAAQ,GAAGV,QAAQ,GAAG,CAACQ,IAAI,CAAClC,KAAN,CAAH,GAAkB,EAArC;;AAEPnD,UAAAA,iBAAiB,CAACuF,QAAD,CAAjB;AACA/F,UAAAA,kBAAkB,CAACuF,aAAnB,CAAiCQ,QAAjC;AACD,SAVH;AAWE,QAAA,4BAA4B,EAAE,IAXhC;AAYE,QAAA,QAAQ,EAAEF,IAAI,EAAEC,QAZlB;AAaE,QAAA,GAAG,EAAE3D,MAAM,CAACyD,MAAM,GAAG,CAAV,CAbb;AAcE,QAAA,IAAI,EAAE7G,IAdR;AAeE,QAAA,GAAG,EAAG,OAAMgB,EAAG,IAAG6F,MAAM,EAAG,EAf7B;AAgBE,QAAA,EAAE,EAAG,GAAE7F,EAAG,IAAG6F,MAAM,GAAG,CAAE,EAhB1B;AAiBE,QAAA,KAAK,EAAEC,IAAI,CAAClC,KAjBd;AAkBE,QAAA,QAAQ,EAAEpD,cAAc,EAAEqD,QAAhB,CAAyBiC,IAAI,CAAClC,KAA9B;AAlBZ,QAnBJ,EAwCG,CAAC3D,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4C,CAACW,kBAAkB,CAACX,SAAjE,kBACG,oBAAC,cAAD;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,IAAI,EAAEN,IAFR;AAGE,QAAA,QAAQ,EAAE8G,IAAI,EAAEC,QAHlB;AAIE,QAAA,GAAG,EAAE3D,MAAM,CAACyD,MAAM,GAAG,CAAV,CAJb;AAKE,QAAA,OAAO,EAAGtD,CAAD,IAAY;AACnBtC,UAAAA,kBAAkB,CAACuF,aAAnB,CAAiC,CAACM,IAAI,CAAClC,KAAN,CAAjC;AACAnD,UAAAA,iBAAiB,CAAC,CAACqF,IAAI,CAAClC,KAAN,CAAD,CAAjB;AACAxD,UAAAA,SAAS,CAAC,KAAD,CAAT;AACAG,UAAAA,UAAU,CAAC,IAAD,CAAV;AACD,SAVH;AAWE,QAAA,SAAS,EAAG,CAACuF,IAAI,CAACG,gBAAL,GAAwB,oBAAxB,GAA+C,EAAhD,IAAsD,GAAtD,IAA6DzF,cAAc,EAAEqD,QAAhB,CAAyBiC,IAAI,CAAClC,KAA9B,IAAuC,QAAvC,GAAkD,EAA/G,CAXd;AAYE,QAAA,GAAG,EAAG,OAAM5D,EAAG,IAAG6F,MAAM,EAAG,EAZ7B;AAaE,QAAA,EAAE,EAAG,GAAE7F,EAAG,IAAG6F,MAAM,GAAG,CAAE;AAb1B,SAcKC,IAAI,CAACG,gBAAL,iBAAyB;AAAK,QAAA,SAAS,EAAC;AAAf,QAd9B,eAeI;AAAK,QAAA,SAAS,EAAC;AAAf,SACGH,IAAI,CAACL,IAAL,iBAAa;AAAK,QAAA,SAAS,EAAC;AAAf,SAA4BK,IAAI,CAACL,IAAjC,CADhB,eAEE;AAAK,QAAA,SAAS,EAAC;AAAf,SACGK,IAAI,CAAChC,YAAL,IAAqBgC,IAAI,CAAClC,KAD7B,EAEGkC,IAAI,CAACJ,SAAL,iBAAkB;AAAK,QAAA,KAAK,EAAE;AAACC,UAAAA,QAAQ,EAAE;AAAX;AAAZ,SAAiCG,IAAI,CAACJ,SAAtC,CAFrB,CAFF,CAfJ,CAzCN,CADF;AAoED,KArEA,CADH,CADF;AA0ED,GArFD;;AAuFA,sBAAO,oBAAC,WAAD;AACC,IAAA,GAAG,EAAE5E,kBADN;AAEC,IAAA,IAAI,EAAE9B,IAFP;AAGC,IAAA,KAAK,EAAEJ,KAHR;AAIC,IAAA,QAAQ,EAAEC,QAJX;AAKC,IAAA,SAAS,EAAEC,SALZ;AAMC,IAAA,UAAU,EAAEmB,kBAAkB,CAACd,UANhC;AAOC,IAAA,SAAS,EAAEc,kBAAkB,CAACb,SAP/B;AAQC,IAAA,SAAS,EAAE,CAACc,MAAM,IAAI,MAAX,EAAmBS,IAAI,IAAI,IAA3B,EAAiCN,MAAjC,CAAwCkC,CAAC,IAAI,CAAC,CAACA,CAA/C,EAAkD2D,IAAlD,CAAuD,GAAvD;AARZ,kBASC,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAElH,IAArB;AAA2B,IAAA,SAAS,EAAEiB,kBAAkB,CAACX,SAAzD;AAAoE,IAAA,QAAQ,EAAEiE,YAA9E;AAA4F,IAAA,GAAG,EAAEtC,YAAjG;AAA+G,IAAA,UAAU,EAAEhB,kBAAkB,CAACd;AAA9I,KACGc,kBAAkB,CAAC+E,UAAnB,IAAiCD,UAAU,EAD9C,EAEGa,WAAW,EAFd,CATD,EAaE3F,kBAAkB,CAACkG,MAAnB,IAA6BlG,kBAAkB,CAACmG,WAAhD,iBACC,oBAAC,qBAAD,qBACE,oBAAC,MAAD;AAAQ,IAAA,KAAK,EAAC,MAAd;AAAqB,IAAA,OAAO,EAAC,SAA7B;AAAuC,IAAA,IAAI,EAAEpH,IAA7C;AAAmD,IAAA,OAAO,EAAE,MAAMiB,kBAAkB,CAACkG,MAAnB;AAAlE,KACGlG,kBAAkB,CAACmG,WADtB,CADF,CAdH,CAAP;AAqBA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEC,CAnWD;;;AAjBEvH,EAAAA,Q;AACAoB,EAAAA,kB;AAbAX,IAAAA,S,aAAY,O,EAAU,U,EAAa,Q;AACnCH,IAAAA,U;AACAsF,IAAAA,W;AACArF,IAAAA,S;AACAgH,IAAAA,W;AACAD,IAAAA,M;AACAnB,IAAAA,U;AACAQ,IAAAA,a;AACApE,IAAAA,K;AAlBAwC,MAAAA,K;AACAE,MAAAA,Y;AACA4B,MAAAA,S;AACAf,MAAAA,U;AACAsB,MAAAA,gB;AACAF,MAAAA,Q;AACAN,MAAAA,I;;;AAkBA3G,EAAAA,S;AACAoB,EAAAA,M;AACAE,EAAAA,S;AAEAJ,EAAAA,E;AACAK,EAAAA,M;AACAzB,EAAAA,K;AACAuB,EAAAA,kB;AACAK,EAAAA,c;AACAC,EAAAA,iB;AACAC,EAAAA,kB;AACAJ,EAAAA,O;AACAC,EAAAA,U;;AAwWF,eAAeR,eAAf","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  \n  width: ${props => props.width ? props.width : '100%'};\n  z-index: 1;\n  margin: ${props => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${props => (props.alignLeft ? 'left: 0px;' : '')}\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  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;  \n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n  focused: number | null;\n  setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  width,\n  setIsOpen,\n  filter,\n  focused, \n  setFocused,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults\n}) => {\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if(!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if(!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [isOpen, arrLength, selectedValues]);\n    \n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n\n  const haveTopItem = () => {\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n    else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\n    return false;\n  };\n  \n  const getSuggestions = () => {\n    return getFilteredItems().filter(x => x.suggestion);\n  }\n\n  React.useLayoutEffect(() => {\n    if (isOpen && (focused || focused == 0)) {\n      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n      if(focusThis != focused)\n        setFocused(focusThis);\n      const newFocusedElement = elRefs[focusThis];\n      console.log(newFocusedElement);\n      newFocusedElement?.current?.focus();\n    }\n  }, [isOpen]);\n\n  \n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getSuggestions();\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      {item.showDividerAbove && <div className=\"divider\"/>}\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          width={width}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}

package/dist/esm/Dropdown/DropdownFilter.js

@@ -1,41 +1,12 @@
 import _pt from "prop-types";
 import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../styles';
+import { COLORS } from '../styles';
 import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { StyledField, Dropdown, ButtonDropdownWrapper } from './CommonStyling';
+import { StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';
 import DropdownContent from './DropdownContent';
+import { Size } from '../types';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
-import { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-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)}
-    }
-  }
-`;
 
 const DropdownFilter = ({
   id,
@@ -64,6 +35,7 @@ const DropdownFilter = ({
   const [placeholderSearch, setPlaceholderSearch] = React.useState(placeholder || '');
   const [restartFilter, setRestartFilter] = React.useState(false);
   const [selectedValues, setSelectedValues] = React.useState([]);
+  const [focused, setFocused] = React.useState(null);
   const styledFieldRef = React.useRef(null);
   const inputRef = React.useRef(null);
 
@@ -220,11 +192,13 @@ const DropdownFilter = ({
     selectedValues: selectedValues,
     setSelectedValues: setSelectedValues,
     hideOnClickOutside: true,
+    size: size == 'medium' ? Size.Medium : Size.Small,
+    focused: focused,
+    setFocused: setFocused,
     customizationProps: {
       itemsType: 'normal',
       multiSelect: false,
       action: () => {},
-      isButton: isButton ?? false,
       onValueUpdate: values => {
         const val = values[0] ?? '';
         setRestartFilter(true);

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

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

package/dist/esm/Footer/Components/FooterTop.js

@@ -86,7 +86,6 @@ const FooterTop = ({
     name: sitename || '',
     showBetaTag: showBetaTag,
     color: COLORS.white,
-    noSizeChangeOnMobile: true,
     betaTagBackgroundColor: COLORS.white,
     betaTagColor: COLORS.neutral_800
   }), /*#__PURE__*/React.createElement(ToTop, {

package/dist/esm/Footer/Components/FooterTop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["React","styled","animateScrollTo","COLORS","Logo","ArrowLineUp","ComponentTextStyle","ComponentXSStyling","FooterTopSection","section","ToTop","div","UppercaseBold","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AAEA,SAAQC,MAAR,QAAqB,cAArB;AACA,OAAOC,IAAP,MAAiB,gCAAjB;AACA,SAAQC,WAAR,QAA0B,qCAA1B;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;AAEA,MAAMC,gBAAgB,GAAGP,MAAM,CAACQ,OAAQ;AACxC;AACA;AACA;AACA;AACA;AACA,CANA;AAQA,MAAMC,KAAK,GAAGT,MAAM,CAACU,GAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,kBAAkB,CAACD,kBAAkB,CAACM,aAApB,EAAmC,SAAnC,CAA8C;AACtE;AACA;AACA;AACA,wBAAwBT,MAAM,CAACU,UAAW;AAC1C;AACA;AACA,cAAcV,MAAM,CAACW,WAAY;AACjC;AACA;AACA,eAAeX,MAAM,CAACW,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,8BAA8BX,MAAM,CAACY,WAAY;AACjD;AACA;AACA;AACA,kBAAkBZ,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,cAAcb,MAAM,CAACc,WAAY;AACjC;AACA;AACA,eAAed,MAAM,CAACc,WAAY;AAClC;AACA;AACA,CAhDA;;AAwDA,MAAMC,SAAS,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,WAAZ;AAAyBC,EAAAA;AAAzB,CAAD,KAA0D;AAC1E,QAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,QAAMC,MAAM,GAAG,MAAM;AACnBzB,IAAAA,eAAe,CAAC,CAAD,CAAf;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEiB,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAEjB,MAAM,CAACyB,KAHhB;AAIE,IAAA,oBAAoB,EAAE,IAJxB;AAKE,IAAA,sBAAsB,EAAEzB,MAAM,CAACyB,KALjC;AAME,IAAA,YAAY,EAAEzB,MAAM,CAAC0B;AANvB,IADF,eASE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAGN,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA5E;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAExB,MAAM,CAACyB;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CATF,CADF;AAgBD,CA5BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;AAiCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ${COLORS.primary_20};\n    svg path,\n    svg {\n      fill: ${COLORS.primary_700};\n    }\n    span {\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    outline: none;\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n\n  &:active:not(:disabled) {\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    svg path,\n    svg {\n      fill: ${COLORS.primary_800};\n    }\n    span {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterTopProps {\n  sitename?: string;\n  showBetaTag?: boolean;\n  toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n  const action = () => {\n    animateScrollTo(0);\n  };\n  return (\n    <FooterTopSection>\n      <Logo\n        name={sitename || ''}\n        showBetaTag={showBetaTag}\n        color={COLORS.white}\n        noSizeChangeOnMobile={true}\n        betaTagBackgroundColor={COLORS.white}\n        betaTagColor={COLORS.neutral_800}\n      />\n      <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n        <ArrowLineUp size=\"24px\" color={COLORS.white} />\n        <span>{toTopText}</span>\n      </ToTop>\n    </FooterTopSection>\n  );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["React","styled","animateScrollTo","COLORS","Logo","ArrowLineUp","ComponentTextStyle","ComponentXSStyling","FooterTopSection","section","ToTop","div","UppercaseBold","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AAEA,SAAQC,MAAR,QAAqB,cAArB;AACA,OAAOC,IAAP,MAAiB,gCAAjB;AACA,SAAQC,WAAR,QAA0B,qCAA1B;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;AAEA,MAAMC,gBAAgB,GAAGP,MAAM,CAACQ,OAAQ;AACxC;AACA;AACA;AACA;AACA;AACA,CANA;AAQA,MAAMC,KAAK,GAAGT,MAAM,CAACU,GAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,kBAAkB,CAACD,kBAAkB,CAACM,aAApB,EAAmC,SAAnC,CAA8C;AACtE;AACA;AACA;AACA,wBAAwBT,MAAM,CAACU,UAAW;AAC1C;AACA;AACA,cAAcV,MAAM,CAACW,WAAY;AACjC;AACA;AACA,eAAeX,MAAM,CAACW,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,8BAA8BX,MAAM,CAACY,WAAY;AACjD;AACA;AACA;AACA,kBAAkBZ,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,cAAcb,MAAM,CAACc,WAAY;AACjC;AACA;AACA,eAAed,MAAM,CAACc,WAAY;AAClC;AACA;AACA,CAhDA;;AAwDA,MAAMC,SAAS,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,WAAZ;AAAyBC,EAAAA;AAAzB,CAAD,KAA0D;AAC1E,QAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,QAAMC,MAAM,GAAG,MAAM;AACnBzB,IAAAA,eAAe,CAAC,CAAD,CAAf;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEiB,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAEjB,MAAM,CAACyB,KAHhB;AAIE,IAAA,sBAAsB,EAAEzB,MAAM,CAACyB,KAJjC;AAKE,IAAA,YAAY,EAAEzB,MAAM,CAAC0B;AALvB,IADF,eAQE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAGN,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA5E;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAExB,MAAM,CAACyB;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CARF,CADF;AAeD,CA3BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;AAgCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ${COLORS.primary_20};\n    svg path,\n    svg {\n      fill: ${COLORS.primary_700};\n    }\n    span {\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    outline: none;\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n\n  &:active:not(:disabled) {\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    svg path,\n    svg {\n      fill: ${COLORS.primary_800};\n    }\n    span {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterTopProps {\n  sitename?: string;\n  showBetaTag?: boolean;\n  toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n  const action = () => {\n    animateScrollTo(0);\n  };\n  return (\n    <FooterTopSection>\n      <Logo\n        name={sitename || ''}\n        showBetaTag={showBetaTag}\n        color={COLORS.white}\n        betaTagBackgroundColor={COLORS.white}\n        betaTagColor={COLORS.neutral_800}\n      />\n      <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n        <ArrowLineUp size=\"24px\" color={COLORS.white} />\n        <span>{toTopText}</span>\n      </ToTop>\n    </FooterTopSection>\n  );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}

package/dist/esm/GlobalNavigationBar/Logo.js

@@ -42,22 +42,25 @@ const LogoContainer = styled.div`
   }
 `;
 const Name = styled.span`
-  margin-left: 12px;
-  padding-left: 12px;
+  margin-left: 8px;
+  padding-left: 8px;
   border-left: 1px solid ${props => props.color || COLORS.black};
   letter-spacing: -0.02em;
 
   ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
   
   font-weight: 300 !important;
-
+  line-height: 24px !important;
+  
   ${BREAKPOINTS.MEDIUM} {
+    margin-left: 12px;
+    padding-left: 12px;
     ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
   }
 `;
 const BetaTag = styled.span`
   background-color: ${props => props.backgroundColor || COLORS.accent2_500};
-  padding: 4px;
+  padding: 4px 8px;
   margin-left: 8px;
   margin-top: 2px;
   border-left: none;