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

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

@@ -2,8 +2,15 @@ import { DropdownItem } from './DropdownButtonTypes';
 interface DropdownFilterProps {
     id: string;
     list: string[] | DropdownItem[];
+    itemsType: 'normal' | 'checkbox' | 'radio';
+    action?: () => void;
+    actionLabel?: string;
+    pinTopItem?: boolean;
+    multiSelect?: boolean;
+    scrollable?: boolean;
+    maxHeight?: string;
     placeholder?: string;
-    onSelect?: (value: string) => void;
+    onSelect?: (value: string[]) => void;
     initalValue?: string;
     disableSorting?: boolean;
     messageOnNoResults?: string;
@@ -15,5 +22,5 @@ interface DropdownFilterProps {
     size?: 'small' | 'medium';
     margin?: string;
 }
-declare const BasicDropdown: ({ id, list, placeholder, onSelect, initalValue, disableSorting, messageOnNoResults, disabled, locked, isButton, activeValidationMessage, autofilledMessage, size, margin, }: DropdownFilterProps) => JSX.Element;
+declare const BasicDropdown: ({ id, list, placeholder, onSelect, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, pinTopItem, multiSelect, scrollable, maxHeight, disabled, locked, isButton, activeValidationMessage, autofilledMessage, size, margin, }: DropdownFilterProps) => JSX.Element;
 export default BasicDropdown;

package/dist/js/Dropdown/BasicDropdown.js

@@ -19,8 +19,12 @@ var _LoadingIndicator = require("../LoadingIndicator");
 
 var _CommonStyling = require("./CommonStyling");
 
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+
 var _styling = require("../InputFields/styling");
 
+var _types = require("../types");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,6 +54,14 @@ var BasicDropdown = function BasicDropdown(_ref) {
       initalValue = _ref.initalValue,
       disableSorting = _ref.disableSorting,
       messageOnNoResults = _ref.messageOnNoResults,
+      itemsType = _ref.itemsType,
+      action = _ref.action,
+      actionLabel = _ref.actionLabel,
+      pinTopItem = _ref.pinTopItem,
+      multiSelect = _ref.multiSelect,
+      _ref$scrollable = _ref.scrollable,
+      scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
+      maxHeight = _ref.maxHeight,
       disabled = _ref.disabled,
       locked = _ref.locked,
       isButton = _ref.isButton,
@@ -89,17 +101,16 @@ var BasicDropdown = function BasicDropdown(_ref) {
       focused = _React$useState12[0],
       setFocused = _React$useState12[1];
 
-  var _React$useState13 = React.useState(false),
+  var _React$useState13 = React.useState([]),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      isUp = _React$useState14[0],
-      setIsUp = _React$useState14[1];
+      selectedValues = _React$useState14[0],
+      setSelectedValues = _React$useState14[1];
 
   var _React$useState15 = React.useState([]),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
       normalizedList = _React$useState16[0],
       setNormalizedList = _React$useState16[1];
 
-  var dropdownContentRef = React.useRef(null);
   var styledFieldRef = React.useRef(null);
 
   var isDropdownItem = function isDropdownItem(item) {
@@ -119,89 +130,32 @@ var BasicDropdown = function BasicDropdown(_ref) {
       }
     }
   }, [list]);
-
-  var handleClickOutside = function handleClickOutside(e) {
-    if (dropdownContentRef !== null && dropdownContentRef !== void 0 && dropdownContentRef.current && !dropdownContentRef.current.contains(e.target)) {
-      if (isOpen) {
-        setIsOpen(false);
-        setFocused(null);
-
-        if (!normalizedList.includes(input)) {
-          setInput('');
-          setPlaceholderSearch(placeholder || '');
-        }
-      }
-    }
-  };
-
-  var setNewFocusedElement = function setNewFocusedElement(index) {
-    var newFocusedElement = document.getElementById("".concat(id, "_").concat(index));
-
-    if (newFocusedElement) {
-      setFocused(index);
-      newFocusedElement.focus();
-    }
-  };
-
-  var handleKeyDown = function 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++;
-          var newFocusedElement = document.getElementById("".concat(id, "_").concat(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 || '');
+  } */
 
   var handleKeyPress = function handleKeyPress(e) {
     if (styledFieldRef !== null && styledFieldRef !== void 0 && 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(function () {
-    determineDropUp();
-  }, [isOpen]);
+  var handleValueSelect = function 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(function () {
     if (initalValue) {
       setInput(initalValue);
@@ -209,65 +163,18 @@ var BasicDropdown = function BasicDropdown(_ref) {
     }
   }, [initalValue]);
   React.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('keypress', handleKeyPress);
-    document.addEventListener('click', handleClickOutside);
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
       document.removeEventListener('keypress', handleKeyPress);
-      document.removeEventListener('click', handleClickOutside);
     };
   });
   React.useEffect(function () {
     setIsLoading(false);
   }, [input]);
 
-  var getElements = function getElements() {
-    var number = 0;
-    var options = normalizedList;
-
-    if (!restartFilter && input !== '') {
-      options = options.filter(function (option) {
-        return 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(function (item) {
-      return /*#__PURE__*/React.createElement(_CommonStyling.DropdownButton, {
-        type: "button",
-        onClick: function onClick(e) {
-          e.preventDefault();
-          setRestartFilter(true);
-          setInput(item);
-          onSelect && onSelect(item);
-          setIsOpen(false);
-          setFocused(null);
-        },
-        className: item === input ? 'active' : '',
-        key: item,
-        id: "".concat(id, "_").concat(number++)
-      }, /*#__PURE__*/React.createElement("span", null, item));
-    });
-  };
-
-  var determineDropUp = function determineDropUp() {
-    var options = normalizedList;
-    var node = dropdownContentRef.current;
-    if (!node) return;
-    var windowHeight = window.innerHeight;
-    var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    var instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
-    setIsUp(instOffsetWithMenu >= windowHeight);
+  var customSetIsOpen = function customSetIsOpen(isOpen) {
+    console.log('dropdown content triggered');
+    setIsOpen(isOpen);
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CommonStyling.Dropdown, {
@@ -305,14 +212,34 @@ var BasicDropdown = function BasicDropdown(_ref) {
   }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
     size: "24px",
     className: size ? size : ''
-  }))), !locked && !disabled && /*#__PURE__*/React.createElement(_CommonStyling.DropdownContent, {
+  }))), !locked && !disabled && /*#__PURE__*/React.createElement(_DropdownContent.default, {
+    customizationProps: {
+      itemsType: itemsType,
+      action: action !== null && action !== void 0 ? action : function () {},
+      actionLabel: actionLabel,
+      scrollable: scrollable,
+      isButton: isButton || false,
+      onValueUpdate: handleValueSelect,
+      items: normalizedList.map(function (x) {
+        return {
+          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 !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
     isButton: isButton || false,
-    ref: dropdownContentRef,
-    id: "".concat(id, "_dropdowncontent"),
-    className: [isOpen && 'show', isUp && 'up'].filter(function (e) {
-      return !!e;
-    }).join(' ')
-  }, getElements())), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+    selectedValues: selectedValues,
+    setSelectedValues: setSelectedValues,
+    id: "".concat(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, {
@@ -324,6 +251,13 @@ var BasicDropdown = function BasicDropdown(_ref) {
 BasicDropdown.propTypes = {
   id: _propTypes.default.string.isRequired,
   list: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.array]).isRequired,
+  itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']).isRequired,
+  action: _propTypes.default.func,
+  actionLabel: _propTypes.default.string,
+  pinTopItem: _propTypes.default.bool,
+  multiSelect: _propTypes.default.bool,
+  scrollable: _propTypes.default.bool,
+  maxHeight: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   onSelect: _propTypes.default.func,
   initalValue: _propTypes.default.string,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","React","useState","isOpen","setIsOpen","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","COLORS","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":["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","React","useState","isOpen","setIsOpen","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","COLORS","neutral_600","onValueUpdate","items","x","value","Size","Medium","Small","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/js/Dropdown/ChipDropdownInput.js

@@ -25,11 +25,13 @@ var _ChipStyles = require("../Chips/ChipStyles");
 
 var _CommonStyling = require("./CommonStyling");
 
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+
 var _LoadingIndicator = require("../LoadingIndicator");
 
 var _typography = require("../styles/typography");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -67,13 +69,7 @@ var ChipInput = _styledComponents.default.input(_templateObject3 || (_templateOb
 
 var StyledDropdownButton = (0, _styledComponents.default)(_CommonStyling.DropdownButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 98%;\n  margin-left: 3px;\n  svg {\n    margin: auto 0 auto 0;\n  }\n"])));
 
-var DropdownButtonLabels = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  span {\n    line-height: 24px;\n  }\n"])));
-
-var SecondaryLabel = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
-
-var SuggestionButton = (0, _styledComponents.default)(StyledDropdownButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
-
-var Loading = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n"])));
+var Loading = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n"])));
 
 var ChipDropdownInput = function ChipDropdownInput(_ref) {
   var list = _ref.list,
@@ -121,17 +117,11 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
   var _React$useState11 = React.useState(false),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
       restartFilter = _React$useState12[0],
-      setRestartFilter = _React$useState12[1];
-
-  var _React$useState13 = React.useState(null),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      focused = _React$useState14[0],
-      setFocused = _React$useState14[1]; // Initiate refs
+      setRestartFilter = _React$useState12[1]; // Initiate refs
 
 
   var chipInput = React.useRef();
   var styledFieldRef = React.useRef(null);
-  var dropdownRef = React.useRef();
   /**
    * Sets initial values for the chips.
    */
@@ -255,120 +245,12 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
     setCurrentSearchResult(options);
   }, [value, givenList, chips]);
 
-  var getElements = function getElements() {
-    var number = 0;
-
-    if ((currentSearchResult === null || currentSearchResult === void 0 ? void 0 : 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: function onClick(e) {
-        var _chipInput$current;
-
-        e.preventDefault();
-        setRestartFilter(true);
-        addChip(suggestion.value);
-        setFocused(null);
-        chipInput === null || chipInput === void 0 ? void 0 : (_chipInput$current = chipInput.current) === null || _chipInput$current === void 0 ? void 0 : _chipInput$current.focus();
-      },
-      className: suggestion.value.toLowerCase() === value.toLowerCase() ? 'active' : '',
-      key: suggestion.value,
-      id: "".concat(inputId, "_").concat(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 === null || currentSearchResult === void 0 ? void 0 : currentSearchResult.map(function (item) {
-      return /*#__PURE__*/React.createElement(StyledDropdownButton, {
-        type: "button",
-        tabIndex: -1,
-        onClick: function onClick(e) {
-          var _chipInput$current2;
-
-          e.preventDefault();
-          setRestartFilter(true);
-          addChip(item.value);
-          setFocused(null);
-          chipInput === null || chipInput === void 0 ? void 0 : (_chipInput$current2 = chipInput.current) === null || _chipInput$current2 === void 0 ? void 0 : _chipInput$current2.focus();
-        },
-        className: item.value.toLowerCase() === value.toLowerCase() ? 'active' : '',
-        key: item.value,
-        id: "".concat(inputId, "_").concat(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));
-    }));
-  };
-
-  var setNewFocusedElement = function setNewFocusedElement(index) {
-    var newFocusedElement = document.getElementById("".concat(inputId, "_").concat(index));
-
-    if (newFocusedElement) {
-      setFocused(index);
-      newFocusedElement.focus();
-    }
-  };
-
-  var handleKeyDown = function 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) {
-        var _styledFieldRef$curre;
-
-        setDropdownIsOpen(false);
-        setNewFocusedElement(0);
-
-        if (!givenList.find(function (e) {
-          return e.value === value;
-        })) {
-          setValue('');
-        }
-
-        (_styledFieldRef$curre = styledFieldRef.current) === null || _styledFieldRef$curre === void 0 ? void 0 : _styledFieldRef$curre.focus();
-      } else if (e.keyCode === 13) {
-        var matches = currentSearchResult === null || currentSearchResult === void 0 ? void 0 : currentSearchResult.filter(function (c) {
-          return c.value.toLowerCase() === value.toLowerCase();
-        });
-
-        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 1
-        /*&& onSelect*/
-        ) {
-          addChip(matches[0].value); //onSelect(chips);
-        } else if (e.target.value === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label)) {
-          addChip(e.target.value);
-        }
-
-        setDropdownIsOpen(!dropdownIsOpen);
-        setNewFocusedElement(0);
+  var handleValueUpdate = function handleValueUpdate(values) {
+    var _chipInput$current;
 
-        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 0) {
-          setValue('');
-        }
-      }
-    }
+    setRestartFilter(true);
+    addChip(values[0]);
+    chipInput === null || chipInput === void 0 ? void 0 : (_chipInput$current = chipInput.current) === null || _chipInput$current === void 0 ? void 0 : _chipInput$current.focus();
   };
 
   var handleKeyPress = function handleKeyPress(e) {
@@ -387,14 +269,12 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
         }
 
         setDropdownIsOpen(!dropdownIsOpen);
-        setNewFocusedElement(0);
 
         if ((matches === null || matches === void 0 ? void 0 : matches.length) === 0) {
           setValue('');
         }
       } else if (e.keyCode === 40) {
         setDropdownIsOpen(!dropdownIsOpen);
-        setNewFocusedElement(0);
       }
     }
   };
@@ -403,7 +283,6 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
     if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && !styledFieldRef.current.contains(e.target)) {
       if (dropdownIsOpen) {
         setDropdownIsOpen(false);
-        setFocused(null);
 
         if (!givenList.find(function (e) {
           return e.value === value;
@@ -415,11 +294,9 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
   };
 
   React.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('keypress', handleKeyPress);
     document.addEventListener('click', handleClickOutside);
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
       document.removeEventListener('keypress', handleKeyPress);
       document.removeEventListener('click', handleClickOutside);
     };
@@ -428,6 +305,20 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
    * Return Chip Input component.
    */
 
+  var dropdownItems = [];
+  if (currentSearchResult) dropdownItems = currentSearchResult.map(function (x) {
+    return {
+      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
+  }].concat(_toConsumableArray(dropdownItems));
   return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(StyledChipInputContainer, {
     id: inputId,
     onClick: function onClick(e) {
@@ -482,12 +373,28 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
   }), 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(_DropdownContent.default, {
+    customizationProps: {
+      isButton: false,
+      action: function action() {},
+      pinTopItem: true,
+      itemsType: 'normal',
+      scrollable: true,
+      actionLabel: '',
+      multiSelect: false,
+      onValueUpdate: handleValueUpdate,
+      items: dropdownItems
+    },
+    hideOnClickOutside: false,
+    selectedValues: [],
+    messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+    setSelectedValues: function setSelectedValues() {},
+    isOpen: dropdownIsOpen,
+    setIsOpen: setDropdownIsOpen,
+    filter: '',
     isButton: false,
-    ref: dropdownRef,
-    id: "".concat(inputId, "_dropdowncontent"),
-    className: dropdownIsOpen ? 'show' : ''
-  }, getElements()), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+    id: "".concat(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, {