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

package/dist/umd/Dropdown/BasicDropdown.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../styles", "../icons/systemicons/SystemIcons", "../LoadingIndicator", "./CommonStyling", "../InputFields/styling"], factory);
+    define(["exports", "prop-types", "react", "../styles", "../icons/systemicons/SystemIcons", "../LoadingIndicator", "./CommonStyling", "./DropdownContent", "../InputFields/styling", "../types"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../LoadingIndicator"), require("./CommonStyling"), require("../InputFields/styling"));
+    factory(exports, require("prop-types"), require("react"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../LoadingIndicator"), require("./CommonStyling"), require("./DropdownContent"), require("../InputFields/styling"), require("../types"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styles, global.SystemIcons, global.LoadingIndicator, global.CommonStyling, global.styling);
+    factory(mod.exports, global.propTypes, global.react, global.styles, global.SystemIcons, global.LoadingIndicator, global.CommonStyling, global.DropdownContent, global.styling, global.types);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styles, _SystemIcons, _LoadingIndicator, _CommonStyling, _styling) {
+})(this, function (exports, _propTypes, _react, _styles, _SystemIcons, _LoadingIndicator, _CommonStyling, _DropdownContent, _styling, _types) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -21,6 +21,8 @@
 
   var React = _interopRequireWildcard(_react);
 
+  var _DropdownContent2 = _interopRequireDefault(_DropdownContent);
+
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -88,6 +90,13 @@
     initalValue,
     disableSorting,
     messageOnNoResults,
+    itemsType,
+    action,
+    actionLabel,
+    pinTopItem,
+    multiSelect,
+    scrollable = true,
+    maxHeight,
     disabled,
     locked,
     isButton,
@@ -102,9 +111,8 @@
     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 => {
@@ -120,89 +128,32 @@
         }
       }
     }, [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);
@@ -210,63 +161,18 @@
       }
     }, [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(_CommonStyling.DropdownButton, {
-          disabled: true
-        }, /*#__PURE__*/React.createElement("span", null, messageOnNoResults));
-      }
-
-      return options.map(item => {
-        return /*#__PURE__*/React.createElement(_CommonStyling.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(_CommonStyling.Dropdown, {
@@ -302,12 +208,32 @@
     }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
       size: "24px",
       className: size ? size : ''
-    }))), !locked && !disabled && /*#__PURE__*/React.createElement(_CommonStyling.DropdownContent, {
+    }))), !locked && !disabled && /*#__PURE__*/React.createElement(_DropdownContent2.default, {
+      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' ? _types.Size.Medium : _types.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(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+      selectedValues: selectedValues,
+      setSelectedValues: setSelectedValues,
+      id: `${id}_dropdowncontent`
+    })), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
       size: "20px",
       color: _styles.COLORS.warning_400
     }), /*#__PURE__*/React.createElement("span", null, activeValidationMessage)), autofilledMessage && /*#__PURE__*/React.createElement(_styling.AutofilledMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.Information, {
@@ -319,6 +245,13 @@
   BasicDropdown.propTypes = {
     id: _propTypes2.default.string.isRequired,
     list: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.string), _propTypes2.default.array]).isRequired,
+    itemsType: _propTypes2.default.oneOf(['normal', 'checkbox', 'radio']).isRequired,
+    action: _propTypes2.default.func,
+    actionLabel: _propTypes2.default.string,
+    pinTopItem: _propTypes2.default.bool,
+    multiSelect: _propTypes2.default.bool,
+    scrollable: _propTypes2.default.bool,
+    maxHeight: _propTypes2.default.string,
     placeholder: _propTypes2.default.string,
     onSelect: _propTypes2.default.func,
     initalValue: _propTypes2.default.string,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","React","dropdownContentRef","styledFieldRef","isDropdownItem","item","setNormalizedList","i","handleClickOutside","e","setIsOpen","setFocused","normalizedList","setInput","setPlaceholderSearch","setNewFocusedElement","index","newFocusedElement","document","handleKeyDown","focusedNow","handleKeyPress","determineDropUp","setRestartFilter","setIsLoading","getElements","number","options","input","option","node","windowHeight","window","menuHeight","Math","instOffsetWithMenu","setIsUp","isOpen","isLoading","COLORS","neutral_600","isUp","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":["id","list","itemsType","action","actionLabel","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","React","styledFieldRef","isDropdownItem","item","setNormalizedList","i","handleKeyPress","e","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","setFocused","document","setIsLoading","customSetIsOpen","isOpen","console","input","isLoading","COLORS","neutral_600","onValueUpdate","items","x","value","Size","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, 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/umd/Dropdown/ChipDropdownInput.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../Chips/index", "../icons/systemicons/SystemIcons", "../InputFields/styling", "../styles", "../Chips/ChipStyles", "./CommonStyling", "../LoadingIndicator", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../Chips/index", "../icons/systemicons/SystemIcons", "../InputFields/styling", "../styles", "../Chips/ChipStyles", "./CommonStyling", "./DropdownContent", "../LoadingIndicator", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Chips/index"), require("../icons/systemicons/SystemIcons"), require("../InputFields/styling"), require("../styles"), require("../Chips/ChipStyles"), require("./CommonStyling"), require("../LoadingIndicator"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Chips/index"), require("../icons/systemicons/SystemIcons"), require("../InputFields/styling"), require("../styles"), require("../Chips/ChipStyles"), require("./CommonStyling"), require("./DropdownContent"), require("../LoadingIndicator"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.index, global.SystemIcons, global.styling, global.styles, global.ChipStyles, global.CommonStyling, global.LoadingIndicator, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.index, global.SystemIcons, global.styling, global.styles, global.ChipStyles, global.CommonStyling, global.DropdownContent, global.LoadingIndicator, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _index, _SystemIcons, _styling, _styles, _ChipStyles, _CommonStyling, _LoadingIndicator, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _index, _SystemIcons, _styling, _styles, _ChipStyles, _CommonStyling, _DropdownContent, _LoadingIndicator, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -23,6 +23,8 @@
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
+  var _DropdownContent2 = _interopRequireDefault(_DropdownContent);
+
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -194,19 +196,6 @@
   svg {
     margin: auto 0 auto 0;
   }
-`;
-  const DropdownButtonLabels = _styledComponents2.default.div`
-  display: flex;
-  flex-direction: column;
-  span {
-    line-height: 24px;
-  }
-`;
-  const SecondaryLabel = _styledComponents2.default.span`
-  ${(0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-`;
-  const SuggestionButton = (0, _styledComponents2.default)(StyledDropdownButton)`
-  border-bottom: 1px solid ${_styles.COLORS.neutral_200};
 `;
   const Loading = _styledComponents2.default.div`
   margin: auto 16px auto auto !important;
@@ -239,12 +228,10 @@
     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.
      */
@@ -359,110 +346,10 @@
       setCurrentSearchResult(options);
     }, [value, givenList, chips]);
 
-    const getElements = () => {
-      var number = 0;
-
-      if (currentSearchResult?.length === 0 && !suggestion) {
-        return /*#__PURE__*/React.createElement(_CommonStyling.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(_SystemIcons.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(_SystemIcons.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 => {
@@ -479,14 +366,12 @@
           }
 
           setDropdownIsOpen(!dropdownIsOpen);
-          setNewFocusedElement(0);
 
           if (matches?.length === 0) {
             setValue('');
           }
         } else if (e.keyCode === 40) {
           setDropdownIsOpen(!dropdownIsOpen);
-          setNewFocusedElement(0);
         }
       }
     };
@@ -495,7 +380,6 @@
       if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {
         if (dropdownIsOpen) {
           setDropdownIsOpen(false);
-          setFocused(null);
 
           if (!givenList.find(e => e.value === value)) {
             setValue('');
@@ -505,11 +389,9 @@
     };
 
     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);
       };
@@ -518,6 +400,18 @@
      * 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 => {
@@ -564,12 +458,28 @@
     }), loading ? /*#__PURE__*/React.createElement(Loading, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
       size: "small",
       color: _styles.COLORS.neutral_600
-    })) : null), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/React.createElement(_CommonStyling.DropdownContent, {
+    })) : null), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/React.createElement(_DropdownContent2.default, {
+      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(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+      id: `${inputId}_dropdowncontent`
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
       size: "20px",
       color: _styles.COLORS.critical_500
     }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(_styling.ErrorMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {