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

package/dist/esm/Dropdown/BasicDropdown.js

@@ -3,8 +3,10 @@ import * as React from 'react';
 import { COLORS } from '../styles';
 import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { DropdownButton, Dropdown, DropdownContent, StyledField } from './CommonStyling';
+import { Dropdown, StyledField } from './CommonStyling';
+import DropdownContent from './DropdownContent';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
+import { Size } from '../types';
 const MAX_MENU_HEIGHT = 240;
 const AVG_OPTION_HEIGHT = 48;
 
@@ -16,6 +18,13 @@ const BasicDropdown = ({
   initalValue,
   disableSorting,
   messageOnNoResults,
+  itemsType,
+  action,
+  actionLabel,
+  pinTopItem,
+  multiSelect,
+  scrollable = true,
+  maxHeight,
   disabled,
   locked,
   isButton,
@@ -30,9 +39,8 @@ const BasicDropdown = ({
   const [placeholderSearch, setPlaceholderSearch] = React.useState(placeholder || '');
   const [restartFilter, setRestartFilter] = React.useState(false);
   const [focused, setFocused] = React.useState(null);
-  const [isUp, setIsUp] = React.useState(false);
+  const [selectedValues, setSelectedValues] = React.useState([]);
   const [normalizedList, setNormalizedList] = React.useState([]);
-  const dropdownContentRef = React.useRef(null);
   const styledFieldRef = React.useRef(null);
 
   const isDropdownItem = item => {
@@ -48,89 +56,32 @@ const BasicDropdown = ({
       }
     }
   }, [list]);
-
-  const handleClickOutside = e => {
-    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target)) {
-      if (isOpen) {
-        setIsOpen(false);
-        setFocused(null);
-
-        if (!normalizedList.includes(input)) {
-          setInput('');
-          setPlaceholderSearch(placeholder || '');
-        }
-      }
-    }
-  };
-
-  const setNewFocusedElement = index => {
-    const newFocusedElement = document.getElementById(`${id}_${index}`);
-
-    if (newFocusedElement) {
-      setFocused(index);
-      newFocusedElement.focus();
-    }
-  };
-
-  const handleKeyDown = e => {
-    if (isOpen) {
-      if (e.keyCode === 38) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
-          focusedNow -= 1;
-          setNewFocusedElement(focusedNow);
-        }
-      } else if (e.keyCode === 40) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
-        } else {
-          focusedNow = 0;
-        }
-
-        setNewFocusedElement(focusedNow);
-      } else if (e.keyCode === 9) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
-          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);
-
-          if (!newFocusedElement) {
-            setNewFocusedElement(0);
-          } else {
-            setNewFocusedElement(focusedNow);
-          }
-        } else {
-          setNewFocusedElement(0);
-        }
-      } else if (e.keyCode === 27) {
-        setIsOpen(false);
-        setNewFocusedElement(0);
-      }
-    }
-  };
+  /*
+  if (!items.includes(input)) {
+    setInput('');
+    setPlaceholderSearch(placeholder || '');
+  } */
 
   const handleKeyPress = e => {
     if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {
       if (e.keyCode === 13) {
         setIsOpen(!isOpen);
-        setNewFocusedElement(0);
       } else if (e.keyCode === 40) {
         setIsOpen(!isOpen);
-        setNewFocusedElement(0);
       }
     }
   };
 
-  React.useEffect(() => {
-    determineDropUp();
-  }, [isOpen]);
+  const handleValueSelect = values => {
+    setRestartFilter(true);
+    setInput(values.join(', '));
+    onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
+
+    if (actionLabel || multiSelect) return;
+    setIsOpen(false);
+    setFocused(null);
+  };
+
   React.useEffect(() => {
     if (initalValue) {
       setInput(initalValue);
@@ -138,63 +89,18 @@ const BasicDropdown = ({
     }
   }, [initalValue]);
   React.useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('keypress', handleKeyPress);
-    document.addEventListener('click', handleClickOutside);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
       document.removeEventListener('keypress', handleKeyPress);
-      document.removeEventListener('click', handleClickOutside);
     };
   });
   React.useEffect(() => {
     setIsLoading(false);
   }, [input]);
 
-  const getElements = () => {
-    var number = 0;
-    var options = normalizedList;
-
-    if (!restartFilter && input !== '') {
-      options = options.filter(option => option.toUpperCase().indexOf(input.toUpperCase()) !== -1);
-    }
-
-    if (!disableSorting) {
-      options = options.sort();
-    }
-
-    if (options.length === 0) {
-      return /*#__PURE__*/React.createElement(DropdownButton, {
-        disabled: true
-      }, /*#__PURE__*/React.createElement("span", null, messageOnNoResults));
-    }
-
-    return options.map(item => {
-      return /*#__PURE__*/React.createElement(DropdownButton, {
-        type: "button",
-        onClick: e => {
-          e.preventDefault();
-          setRestartFilter(true);
-          setInput(item);
-          onSelect && onSelect(item);
-          setIsOpen(false);
-          setFocused(null);
-        },
-        className: item === input ? 'active' : '',
-        key: item,
-        id: `${id}_${number++}`
-      }, /*#__PURE__*/React.createElement("span", null, item));
-    });
-  };
-
-  const determineDropUp = () => {
-    const options = normalizedList;
-    const node = dropdownContentRef.current;
-    if (!node) return;
-    const windowHeight = window.innerHeight;
-    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
-    setIsUp(instOffsetWithMenu >= windowHeight);
+  const customSetIsOpen = isOpen => {
+    console.log('dropdown content triggered');
+    setIsOpen(isOpen);
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
@@ -231,11 +137,31 @@ const BasicDropdown = ({
     size: "24px",
     className: size ? size : ''
   }))), !locked && !disabled && /*#__PURE__*/React.createElement(DropdownContent, {
+    customizationProps: {
+      itemsType: itemsType,
+      action: action ?? (() => {}),
+      actionLabel: actionLabel,
+      scrollable: scrollable,
+      isButton: isButton || false,
+      onValueUpdate: handleValueSelect,
+      items: normalizedList.map(x => ({
+        value: x
+      })),
+      multiSelect: multiSelect,
+      pinTopItem: pinTopItem,
+      maxHeight: maxHeight
+    },
+    size: size == 'medium' ? Size.Medium : Size.Small,
+    filter: '',
+    hideOnClickOutside: true,
+    isOpen: isOpen,
+    setIsOpen: customSetIsOpen,
+    messageOnNoResults: messageOnNoResults ?? '',
     isButton: isButton || false,
-    ref: dropdownContentRef,
-    id: `${id}_dropdowncontent`,
-    className: [isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')
-  }, getElements())), activeValidationMessage && /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    selectedValues: selectedValues,
+    setSelectedValues: setSelectedValues,
+    id: `${id}_dropdowncontent`
+  })), activeValidationMessage && /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
     size: "20px",
     color: COLORS.warning_400
   }), /*#__PURE__*/React.createElement("span", null, activeValidationMessage)), autofilledMessage && /*#__PURE__*/React.createElement(AutofilledMessage, null, /*#__PURE__*/React.createElement(Information, {
@@ -247,6 +173,13 @@ const BasicDropdown = ({
 BasicDropdown.propTypes = {
   id: _pt.string.isRequired,
   list: _pt.oneOfType([_pt.arrayOf(_pt.string), _pt.array]).isRequired,
+  itemsType: _pt.oneOf(['normal', 'checkbox', 'radio']).isRequired,
+  action: _pt.func,
+  actionLabel: _pt.string,
+  pinTopItem: _pt.bool,
+  multiSelect: _pt.bool,
+  scrollable: _pt.bool,
+  maxHeight: _pt.string,
   placeholder: _pt.string,
   onSelect: _pt.func,
   initalValue: _pt.string,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","DropdownButton","Dropdown","DropdownContent","StyledField","AutofilledMessage","WarningMessage","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","isUp","setIsUp","normalizedList","setNormalizedList","dropdownContentRef","useRef","styledFieldRef","isDropdownItem","item","label","undefined","useEffect","length","map","i","handleClickOutside","e","current","contains","target","includes","setNewFocusedElement","index","newFocusedElement","document","getElementById","focus","handleKeyDown","keyCode","preventDefault","focusedNow","handleKeyPress","determineDropUp","addEventListener","removeEventListener","getElements","number","options","filter","option","toUpperCase","indexOf","sort","node","windowHeight","window","innerHeight","menuHeight","Math","min","instOffsetWithMenu","getBoundingClientRect","top","concat","neutral_600","join","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, DropdownContent, StyledField } from './CommonStyling';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { DropdownItem } from './DropdownButtonTypes';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[] | DropdownItem[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  initalValue?: string;\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  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\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>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const [normalizedList, setNormalizedList] = React.useState<string[]>([]);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  const isDropdownItem = (item: string | DropdownItem) => {\n    return (item as DropdownItem).label !== undefined;\n  };\n\n  React.useEffect(() => {\n    if (list.length > 0) {\n      if (isDropdownItem(list[0])) {\n        setNormalizedList((list as (string | DropdownItem)[]).map((i: string | DropdownItem) => (i as DropdownItem).label));\n      } else {\n        setNormalizedList((list as (string | DropdownItem)[]).map((i: string | DropdownItem) => i as string));\n      }\n    }\n  }, [list]);\n\n  const handleClickOutside = (e: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target)) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n        if (!normalizedList.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n      }\n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = document.getElementById(`${id}_${index}`);\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement.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    }\n  };\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const getElements = () => {\n    var number = 0;\n    var options = normalizedList;\n    if (!restartFilter && input !== '') {\n      options = options.filter((option) => option.toUpperCase().indexOf(input.toUpperCase()) !== -1);\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    if (options.length === 0) {\n      return (\n        <DropdownButton disabled>\n          <span>{messageOnNoResults}</span>\n        </DropdownButton>\n      );\n    }\n    return options.map((item) => {\n      return (\n        <DropdownButton\n          type=\"button\"\n          onClick={(e: any) => {\n            e.preventDefault();\n            setRestartFilter(true);\n            setInput(item);\n            onSelect && onSelect(item);\n            setIsOpen(false);\n            setFocused(null);\n          }}\n          className={item === input ? 'active' : ''}\n          key={item}\n          id={`${id}_${number++}`}>\n          <span>{item}</span>\n        </DropdownButton>\n      );\n    });\n  };\n\n  const determineDropUp = () => {\n    const options = normalizedList;\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  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          isPlaceholder={!input}>\n          <div className={'value'}>{input || placeholderSearch}</div>\n          {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            isButton={isButton || false}\n            ref={dropdownContentRef}\n            id={`${id}_dropdowncontent`}\n            className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\n            {getElements()}\n          </DropdownContent>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","normalizedList","setNormalizedList","styledFieldRef","useRef","isDropdownItem","item","label","undefined","useEffect","length","map","i","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","document","addEventListener","removeEventListener","customSetIsOpen","console","log","concat","neutral_600","onValueUpdate","items","x","value","Medium","Small","warning_400"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,WAArC,EAAkDC,gBAAlD,QAA0E,kCAA1E;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAAyBC,QAAzB,EAAmCC,WAAnC,QAAsD,iBAAtD;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,cAA5B,QAAkD,wBAAlD;AAEA,SAASC,IAAT,QAAqB,UAArB;AA0BA,MAAMC,eAAe,GAAG,GAAxB;AACA,MAAMC,iBAAiB,GAAG,EAA1B;;AAEA,MAAMC,aAAa,GAAG,CAAC;AACrBC,EAAAA,EADqB;AAErBC,EAAAA,IAFqB;AAGrBC,EAAAA,WAHqB;AAIrBC,EAAAA,QAJqB;AAKrBC,EAAAA,WALqB;AAMrBC,EAAAA,cANqB;AAOrBC,EAAAA,kBAPqB;AAQrBC,EAAAA,SARqB;AASrBC,EAAAA,MATqB;AAUrBC,EAAAA,WAVqB;AAWrBC,EAAAA,UAXqB;AAYrBC,EAAAA,WAZqB;AAarBC,EAAAA,UAAU,GAAG,IAbQ;AAcrBC,EAAAA,SAdqB;AAerBC,EAAAA,QAfqB;AAgBrBC,EAAAA,MAhBqB;AAiBrBC,EAAAA,QAjBqB;AAkBrBC,EAAAA,uBAlBqB;AAmBrBC,EAAAA,iBAnBqB;AAoBrBC,EAAAA,IApBqB;AAqBrBC,EAAAA,MAAM,GAAG;AArBY,CAAD,KAsBK;AACzB,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBtC,KAAK,CAACuC,QAAN,CAAwB,KAAxB,CAA5B;AACA,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BzC,KAAK,CAACuC,QAAN,CAAwB,KAAxB,CAAlC;AACA,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoB3C,KAAK,CAACuC,QAAN,CAAuB,EAAvB,CAA1B;AACA,QAAM,CAACK,iBAAD,EAAoBC,oBAApB,IAA4C7C,KAAK,CAACuC,QAAN,CAAuBrB,WAAW,IAAI,EAAtC,CAAlD;AACA,QAAM,CAAC4B,aAAD,EAAgBC,gBAAhB,IAAoC/C,KAAK,CAACuC,QAAN,CAAwB,KAAxB,CAA1C;AACA,QAAM,CAACS,OAAD,EAAUC,UAAV,IAAwBjD,KAAK,CAACuC,QAAN,CAA8B,IAA9B,CAA9B;AACA,QAAM,CAACW,cAAD,EAAiBC,iBAAjB,IAAsCnD,KAAK,CAACuC,QAAN,CAAyB,EAAzB,CAA5C;AACA,QAAM,CAACa,cAAD,EAAiBC,iBAAjB,IAAsCrD,KAAK,CAACuC,QAAN,CAAyB,EAAzB,CAA5C;AAEA,QAAMe,cAAc,GAAGtD,KAAK,CAACuD,MAAN,CAA6B,IAA7B,CAAvB;;AAEA,QAAMC,cAAc,GAAIC,IAAD,IAAiC;AACtD,WAAQA,IAAD,CAAuBC,KAAvB,KAAiCC,SAAxC;AACD,GAFD;;AAIA3D,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpB,QAAI3C,IAAI,CAAC4C,MAAL,GAAc,CAAlB,EAAqB;AACnB,UAAIL,cAAc,CAACvC,IAAI,CAAC,CAAD,CAAL,CAAlB,EAA6B;AAC3BoC,QAAAA,iBAAiB,CAAEpC,IAAD,CAAoC6C,GAApC,CAAyCC,CAAD,IAA+BA,CAAD,CAAoBL,KAA1F,CAAD,CAAjB;AACD,OAFD,MAEO;AACLL,QAAAA,iBAAiB,CAAEpC,IAAD,CAAoC6C,GAApC,CAAyCC,CAAD,IAA8BA,CAAtE,CAAD,CAAjB;AACD;AACF;AACF,GARD,EAQG,CAAC9C,IAAD,CARH;AAUA;AACF;AACA;AACA;AACA;;AAEE,QAAM+C,cAAc,GAAIC,CAAD,IAAY;AACjC,QAAIX,cAAc,EAAEY,OAAhB,IAA2BZ,cAAc,CAACY,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAA/B,EAA0E;AACxE,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AACpB/B,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD,OAFD,MAEO,IAAI4B,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AAC3B/B,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF;AACF,GARD;;AAUA,QAAMiC,iBAAiB,GAAIC,MAAD,IAAsB;AAE9CxB,IAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAJ,IAAAA,QAAQ,CAAC4B,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;AACArD,IAAAA,QAAQ,IAAIA,QAAQ,CAACoD,MAAD,CAApB,CAJ8C,CAK9C;;AACA,QAAG9C,WAAW,IAAIE,WAAlB,EACE;AAEFW,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAW,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAXD;;AAaAjD,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpB,QAAIxC,WAAJ,EAAiB;AACfuB,MAAAA,QAAQ,CAACvB,WAAD,CAAR;AACA2B,MAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACD;AACF,GALD,EAKG,CAAC3B,WAAD,CALH;AAOApB,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpBa,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsCV,cAAtC;AACA,WAAO,MAAM;AACXS,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCX,cAAzC;AACD,KAFD;AAGD,GALD;AAOAhE,EAAAA,KAAK,CAAC4D,SAAN,CAAgB,MAAM;AACpBnB,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFD,EAEG,CAACC,KAAD,CAFH;;AAIA,QAAMkC,eAAe,GAAIvC,MAAD,IAAqB;AAC3CwC,IAAAA,OAAO,CAACC,GAAR,CAAY,4BAAZ;AACAxC,IAAAA,SAAS,CAACD,MAAD,CAAT;AACD,GAHD;;AAKA,sBACE,uDACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAEL,QAAQ,IAAI,KAAhC;AAAuC,IAAA,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAAhE;AAAoE,IAAA,MAAM,EAAEJ,MAA5E;AAAoF,IAAA,QAAQ,EAAED,QAA9F;AAAwG,IAAA,MAAM,EAAEM;AAAhH,kBACE,oBAAC,WAAD;AACE,IAAA,GAAG,EAAEkB,cADP;AAEE,IAAA,SAAS,EAAE,CAACjB,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4B0C,MAA5B,CAAmC5C,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqD4C,MAArD,CAA4D/C,QAAQ,GAAG,QAAH,GAAc,EAAlF,CAFb;AAGE,IAAA,OAAO,EAAE,MAAM;AACb,UAAI,CAACD,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxBQ,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,KAPH;AAQE,IAAA,QAAQ,EAAEP,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CARtC;AASE,IAAA,QAAQ,EAAED,QAAQ,IAAI,KATxB;AAUE,IAAA,MAAM,EAAEC,MAAM,IAAI,KAVpB;AAWE,IAAA,qBAAqB,EAAE,CAAC,CAACE,uBAX3B;AAYE,IAAA,aAAa,EAAE,CAACS;AAZlB,kBAaE;AAAK,IAAA,SAAS,EAAE;AAAhB,KAA0BA,KAAK,IAAIE,iBAAnC,CAbF,EAcGJ,SAAS,gBAAG,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,OAAvB;AAA+B,IAAA,KAAK,EAAEvC,MAAM,CAAC+E;AAA7C,IAAH,GAAkE,IAd9E,eAeE;AAAK,IAAA,OAAO,EAAE,MAAM1C,SAAS,CAAC,CAACD,MAAF,CAA7B;AAAwC,IAAA,SAAS,EAAE;AAAnD,KACGA,MAAM,gBAAG,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,SAAS,EAAEF,IAAI,GAAGA,IAAH,GAAU;AAAlD,IAAH,gBAA8D,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD,IADvE,CAfF,CADF,EAoBG,CAACJ,MAAD,IAAW,CAACD,QAAZ,iBACC,oBAAC,eAAD;AACE,IAAA,kBAAkB,EAAE;AAClBP,MAAAA,SAAS,EAAEA,SADO;AAElBC,MAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAAE,CAAb,CAFI;AAGlBC,MAAAA,WAAW,EAAEA,WAHK;AAIlBG,MAAAA,UAAU,EAAEA,UAJM;AAKlBI,MAAAA,QAAQ,EAAEA,QAAQ,IAAI,KALJ;AAMlBiD,MAAAA,aAAa,EAAEX,iBANG;AAOlBY,MAAAA,KAAK,EAAE9B,cAAc,CAACU,GAAf,CAAmBqB,CAAC,KAAK;AAAEC,QAAAA,KAAK,EAAED;AAAT,OAAL,CAApB,CAPW;AAQlBxD,MAAAA,WAAW,EAAEA,WARK;AASlBD,MAAAA,UAAU,EAAEA,UATM;AAUlBG,MAAAA,SAAS,EAAEA;AAVO,KADtB;AAaE,IAAA,IAAI,EAAEM,IAAI,IAAI,QAAR,GAAmBvB,IAAI,CAACyE,MAAxB,GAAiCzE,IAAI,CAAC0E,KAb9C;AAcE,IAAA,MAAM,EAAE,EAdV;AAeE,IAAA,kBAAkB,EAAE,IAftB;AAgBE,IAAA,MAAM,EAAEjD,MAhBV;AAiBE,IAAA,SAAS,EAAEuC,eAjBb;AAkBE,IAAA,kBAAkB,EAAEtD,kBAAkB,IAAI,EAlB5C;AAmBE,IAAA,QAAQ,EAAEU,QAAQ,IAAI,KAnBxB;AAoBE,IAAA,cAAc,EAAEkB,cApBlB;AAqBE,IAAA,iBAAiB,EAAEC,iBArBrB;AAsBE,IAAA,EAAE,EAAG,GAAEnC,EAAG;AAtBZ,IArBJ,CADF,EAgDGiB,uBAAuB,iBACtB,oBAAC,cAAD,qBACE,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAEhC,MAAM,CAACsF;AAA5C,IADF,eAEE,kCAAOtD,uBAAP,CAFF,CAjDJ,EAsDGC,iBAAiB,iBAChB,oBAAC,iBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAEjC,MAAM,CAAC+E;AAAvC,IADF,eAEE,kCAAO9C,iBAAP,CAFF,CAvDJ,CADF;AA+DD,CAnKD;;;AA1BElB,EAAAA,E;AACAC,EAAAA,I;AACAM,EAAAA,S,aAAW,Q,EAAW,U,EAAa,O;AACnCC,EAAAA,M;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,S;AACAX,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,kB;AACAQ,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AACAC,EAAAA,I,aAAO,O,EAAU,Q;AACjBC,EAAAA,M;;AA2KF,eAAerB,aAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField } from './CommonStyling';\nimport DropdownContent from './DropdownContent'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { DropdownItem } from './DropdownButtonTypes';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[] | DropdownItem[];\n  itemsType: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  initalValue?: string;\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  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType,\n  action,\n  actionLabel,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\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>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [normalizedList, setNormalizedList] = React.useState<string[]>([]);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  const isDropdownItem = (item: string | DropdownItem) => {\n    return (item as DropdownItem).label !== undefined;\n  };\n\n  React.useEffect(() => {\n    if (list.length > 0) {\n      if (isDropdownItem(list[0])) {\n        setNormalizedList((list as (string | DropdownItem)[]).map((i: string | DropdownItem) => (i as DropdownItem).label));\n      } else {\n        setNormalizedList((list as (string | DropdownItem)[]).map((i: string | DropdownItem) => i as string));\n      }\n    }\n  }, [list]);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    \n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if(actionLabel || multiSelect)\n      return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\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  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    console.log('dropdown content triggered');\n    setIsOpen(isOpen);\n  }\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          isPlaceholder={!input}>\n          <div className={'value'}>{input || placeholderSearch}</div>\n          {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              scrollable: scrollable,\n              isButton: isButton || false,\n              onValueUpdate: handleValueSelect,\n              items: normalizedList.map(x => ({ value: x })),\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight\n            }}\n            size={size == 'medium' ? Size.Medium : Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

package/dist/esm/Dropdown/ChipDropdownInput.js

@@ -14,7 +14,7 @@ import styled from 'styled-components';
  */
 
 import { InputChip } from '../Chips/index';
-import { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';
+import { Search, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { WarningMessage, ErrorMessage } from '../InputFields/styling';
 import { COLORS } from '../styles';
 /**
@@ -26,9 +26,10 @@ import { ChipInputContainer } from '../Chips/ChipStyles';
  * Import custom types.
  */
 
-import { DropdownButton, DropdownContent } from './CommonStyling';
+import { DropdownButton } from './CommonStyling';
+import DropdownContent from './DropdownContent';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';
+import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
 const Wrapper = styled.div`
   position: relative;
   display: inline-block;
@@ -126,19 +127,6 @@ const StyledDropdownButton = styled(DropdownButton)`
     margin: auto 0 auto 0;
   }
 `;
-const DropdownButtonLabels = styled.div`
-  display: flex;
-  flex-direction: column;
-  span {
-    line-height: 24px;
-  }
-`;
-const SecondaryLabel = styled.span`
-  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
-`;
-const SuggestionButton = styled(StyledDropdownButton)`
-  border-bottom: 1px solid ${COLORS.neutral_200};
-`;
 const Loading = styled.div`
   margin: auto 16px auto auto !important;
   height: 20px;
@@ -170,12 +158,10 @@ const ChipDropdownInput = ({
   const [value, setValue] = React.useState('');
   const [dropdownIsOpen, setDropdownIsOpen] = React.useState(false);
   const [currentSearchResult, setCurrentSearchResult] = React.useState();
-  const [restartFilter, setRestartFilter] = React.useState(false);
-  const [focused, setFocused] = React.useState(null); // Initiate refs
+  const [restartFilter, setRestartFilter] = React.useState(false); // Initiate refs
 
   const chipInput = React.useRef();
   const styledFieldRef = React.useRef(null);
-  const dropdownRef = React.useRef();
   /**
    * Sets initial values for the chips.
    */
@@ -290,110 +276,10 @@ const ChipDropdownInput = ({
     setCurrentSearchResult(options);
   }, [value, givenList, chips]);
 
-  const getElements = () => {
-    var number = 0;
-
-    if (currentSearchResult?.length === 0 && !suggestion) {
-      return /*#__PURE__*/React.createElement(DropdownButton, {
-        disabled: true
-      }, /*#__PURE__*/React.createElement("span", null, messageOnNoResults));
-    }
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, suggestion && /*#__PURE__*/React.createElement(SuggestionButton, {
-      type: "button",
-      tabIndex: -1,
-      onClick: e => {
-        e.preventDefault();
-        setRestartFilter(true);
-        addChip(suggestion.value);
-        setFocused(null);
-        chipInput?.current?.focus();
-      },
-      className: suggestion.value.toLowerCase() === value.toLowerCase() ? 'active' : '',
-      key: suggestion.value,
-      id: `${inputId}_${number++}`
-    }, !excludeIcon && /*#__PURE__*/React.createElement(User, {
-      size: "24px"
-    }), suggestion.secondaryLabel ? /*#__PURE__*/React.createElement(DropdownButtonLabels, null, /*#__PURE__*/React.createElement("span", null, suggestion.label), /*#__PURE__*/React.createElement(SecondaryLabel, null, suggestion.secondaryLabel)) : /*#__PURE__*/React.createElement("span", null, suggestion.label)), currentSearchResult?.map(item => {
-      return /*#__PURE__*/React.createElement(StyledDropdownButton, {
-        type: "button",
-        tabIndex: -1,
-        onClick: e => {
-          e.preventDefault();
-          setRestartFilter(true);
-          addChip(item.value);
-          setFocused(null);
-          chipInput?.current?.focus();
-        },
-        className: item.value.toLowerCase() === value.toLowerCase() ? 'active' : '',
-        key: item.value,
-        id: `${inputId}_${number++}`
-      }, !excludeIcon && /*#__PURE__*/React.createElement(User, {
-        size: "24px"
-      }), item.secondaryLabel ? /*#__PURE__*/React.createElement(DropdownButtonLabels, null, /*#__PURE__*/React.createElement("span", null, item.label), /*#__PURE__*/React.createElement(SecondaryLabel, null, item.secondaryLabel)) : /*#__PURE__*/React.createElement("span", null, item.label));
-    }));
-  };
-
-  const setNewFocusedElement = index => {
-    const newFocusedElement = document.getElementById(`${inputId}_${index}`);
-
-    if (newFocusedElement) {
-      setFocused(index);
-      newFocusedElement.focus();
-    }
-  };
-
-  const handleKeyDown = e => {
-    if (dropdownIsOpen) {
-      if (e.keyCode === 38) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
-          focusedNow -= 1;
-          setNewFocusedElement(focusedNow);
-        }
-      } else if (e.keyCode === 40) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
-        } else {
-          focusedNow = 0;
-        }
-
-        setNewFocusedElement(focusedNow);
-      } else if (e.keyCode === 9) {
-        setDropdownIsOpen(false);
-      } else if (e.keyCode === 27) {
-        setDropdownIsOpen(false);
-        setNewFocusedElement(0);
-
-        if (!givenList.find(e => e.value === value)) {
-          setValue('');
-        }
-
-        styledFieldRef.current?.focus();
-      } else if (e.keyCode === 13) {
-        const matches = currentSearchResult?.filter(c => c.value.toLowerCase() === value.toLowerCase());
-
-        if (matches?.length === 1
-        /*&& onSelect*/
-        ) {
-          addChip(matches[0].value); //onSelect(chips);
-        } else if (e.target.value === suggestion?.label) {
-          addChip(e.target.value);
-        }
-
-        setDropdownIsOpen(!dropdownIsOpen);
-        setNewFocusedElement(0);
-
-        if (matches?.length === 0) {
-          setValue('');
-        }
-      }
-    }
+  const handleValueUpdate = values => {
+    setRestartFilter(true);
+    addChip(values[0]);
+    chipInput?.current?.focus();
   };
 
   const handleKeyPress = e => {
@@ -410,14 +296,12 @@ const ChipDropdownInput = ({
         }
 
         setDropdownIsOpen(!dropdownIsOpen);
-        setNewFocusedElement(0);
 
         if (matches?.length === 0) {
           setValue('');
         }
       } else if (e.keyCode === 40) {
         setDropdownIsOpen(!dropdownIsOpen);
-        setNewFocusedElement(0);
       }
     }
   };
@@ -426,7 +310,6 @@ const ChipDropdownInput = ({
     if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {
       if (dropdownIsOpen) {
         setDropdownIsOpen(false);
-        setFocused(null);
 
         if (!givenList.find(e => e.value === value)) {
           setValue('');
@@ -436,11 +319,9 @@ const ChipDropdownInput = ({
   };
 
   React.useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('keypress', handleKeyPress);
     document.addEventListener('click', handleClickOutside);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
       document.removeEventListener('keypress', handleKeyPress);
       document.removeEventListener('click', handleClickOutside);
     };
@@ -449,6 +330,18 @@ const ChipDropdownInput = ({
    * Return Chip Input component.
    */
 
+  let dropdownItems = [];
+  if (currentSearchResult) dropdownItems = currentSearchResult.map(x => ({
+    value: x.value,
+    displayLabel: x.label,
+    noteLabel: x.secondaryLabel
+  }));
+  if (suggestion && !chips.includes(suggestion.value)) dropdownItems = [{
+    value: suggestion.value,
+    displayLabel: suggestion.label,
+    noteLabel: suggestion.secondaryLabel,
+    suggestion: true
+  }, ...dropdownItems];
   return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(StyledChipInputContainer, {
     id: inputId,
     onClick: e => {
@@ -496,11 +389,27 @@ const ChipDropdownInput = ({
     size: "small",
     color: COLORS.neutral_600
   })) : null), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/React.createElement(DropdownContent, {
+    customizationProps: {
+      isButton: false,
+      action: () => {},
+      pinTopItem: true,
+      itemsType: 'normal',
+      scrollable: true,
+      actionLabel: '',
+      multiSelect: false,
+      onValueUpdate: handleValueUpdate,
+      items: dropdownItems
+    },
+    hideOnClickOutside: false,
+    selectedValues: [],
+    messageOnNoResults: messageOnNoResults ?? '',
+    setSelectedValues: () => {},
+    isOpen: dropdownIsOpen,
+    setIsOpen: setDropdownIsOpen,
+    filter: '',
     isButton: false,
-    ref: dropdownRef,
-    id: `${inputId}_dropdowncontent`,
-    className: dropdownIsOpen ? 'show' : ''
-  }, getElements()), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    id: `${inputId}_dropdowncontent`
+  }), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
     size: "20px",
     color: COLORS.critical_500
   }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {