@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/Dropdown/ChipDropdownInput.js

@@ -1,5 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
 /**
  * Import React libraries.
  */
@@ -31,144 +36,75 @@ import { DropdownButton } from './CommonStyling';
 import DropdownContent from './DropdownContent';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
-const Wrapper = styled.div`
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  min-width: 344px;
-`;
-const StyledChipInputContainer = styled(ChipInputContainer)`
-  padding: 2px 2px 2px 48px !important;
-  min-height: 56px;
-  max-height: 176px;
-  overflow-y: auto;
-  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};
-
-  .medium {
-    margin-right: 8px !important;
-  }
-  .SearchIcon {
-    position: absolute;
-    left: 18px;
-    top: 18px;
-  }
-
-  &:active {
-    background-color: ${COLORS.primary_100};
-  }
-
-  &.invalid {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
-  }
-  &.alreadyInOrganization {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-  }
-
-  &.empty:hover {
-    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};
-    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};
-    box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};
-  }
-
-  &.inputHasFocus {
-    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};
-    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};
-    box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};
-  }
-  &:hover {
-    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};
-    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};
-    box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: 4px;
-    cursor: pointer;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: ${COLORS.white};
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${COLORS.neutral_500};
-    border-radius: 8px;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${COLORS.neutral_700};
-    cursor: pointer;
-  }
-`;
-const ChipInput = styled.input`
-  height: 40px;
-  width: auto;
-  display: inline-flex;
-  border: none;
-  outline: none;
-  margin: 4px;
-
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  color: ${COLORS.black} !important;
-  background-color: inherit;
-`;
-const StyledDropdownButton = styled(DropdownButton)`
-  display: flex;
-  width: 98%;
-  margin-left: 3px;
-  svg {
-    margin: auto 0 auto 0;
-  }
-`;
-const Loading = styled.div`
-  margin: auto 16px auto auto !important;
-  height: 20px;
-  div {
-    height: 20px;
-  }
-`;
-
-const ChipDropdownInput = ({
-  list,
-  onInputChange,
-  disableSorting,
-  messageOnNoResults,
-  values,
-  inputId,
-  variants,
-  placeholder,
-  validationType,
-  validationMessage,
-  onValueChange,
-  suggestion,
-  excludeIcon,
-  loading,
-  maxSelectedItems
-}) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-width: 344px;\n"])));
+var StyledChipInputContainer = styled(ChipInputContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 2px 2px 2px 48px !important;\n  min-height: 56px;\n  max-height: 176px;\n  overflow-y: auto;\n  box-shadow: 0px 0px 0px 1px ", ";\n\n  .medium {\n    margin-right: 8px !important;\n  }\n  .SearchIcon {\n    position: absolute;\n    left: 18px;\n    top: 18px;\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.invalid {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &.alreadyInOrganization {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.empty:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n\n  &.inputHasFocus {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n    cursor: pointer;\n  }\n"])), COLORS.neutral_400, COLORS.primary_100, COLORS.critical_400, COLORS.critical_400, COLORS.critical_400, COLORS.warning_400, COLORS.warning_400, COLORS.warning_400, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_800, COLORS.primary_800, COLORS.primary_800, COLORS.primary_700, COLORS.primary_700, COLORS.primary_700, COLORS.white, COLORS.neutral_500, COLORS.neutral_700);
+var ChipInput = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin: 4px;\n\n  ", "\n  color: ", " !important;\n  background-color: inherit;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black);
+var StyledDropdownButton = styled(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 Loading = styled.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,
+      onInputChange = _ref.onInputChange,
+      disableSorting = _ref.disableSorting,
+      messageOnNoResults = _ref.messageOnNoResults,
+      values = _ref.values,
+      inputId = _ref.inputId,
+      variants = _ref.variants,
+      placeholder = _ref.placeholder,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      onValueChange = _ref.onValueChange,
+      suggestion = _ref.suggestion,
+      excludeIcon = _ref.excludeIcon,
+      loading = _ref.loading,
+      maxSelectedItems = _ref.maxSelectedItems;
+
   // Initiate states
-  const [givenList, setGivenList] = React.useState([]);
-  const [chips, setChips] = React.useState([]);
-  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 chipInput = React.useRef();
-  const styledFieldRef = React.useRef(null);
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      givenList = _React$useState2[0],
+      setGivenList = _React$useState2[1];
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      chips = _React$useState4[0],
+      setChips = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      value = _React$useState6[0],
+      setValue = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      dropdownIsOpen = _React$useState8[0],
+      setDropdownIsOpen = _React$useState8[1];
+
+  var _React$useState9 = React.useState(),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      currentSearchResult = _React$useState10[0],
+      setCurrentSearchResult = _React$useState10[1];
+
+  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
+
+
+  var chipInput = React.useRef();
+  var styledFieldRef = React.useRef(null);
   /**
    * Sets initial values for the chips.
    */
 
-  React.useEffect(() => {
+  React.useEffect(function () {
     // Let's add initial chip values
     setChips(values);
   }, [values]);
@@ -176,22 +112,24 @@ const ChipDropdownInput = ({
    * Convert string[] to List[] if necessary
    */
 
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (typeof list[0] === 'string') {
-      const newList = list.map(e => ({
-        label: e,
-        value: e
-      }));
+      var newList = list.map(function (e) {
+        return {
+          label: e,
+          value: e
+        };
+      });
       setGivenList(newList);
     } else {
       setGivenList(list);
     }
   }, [list]);
 
-  const addChip = newChip => {
+  var addChip = function addChip(newChip) {
     // Let's add the chip
-    setChips([...chips, newChip]);
-    onValueChange([...chips, newChip]); // Let's clear the old value
+    setChips([].concat(_toConsumableArray(chips), [newChip]));
+    onValueChange([].concat(_toConsumableArray(chips), [newChip])); // Let's clear the old value
 
     chipInput.current.value = '';
     setValue('');
@@ -202,10 +140,12 @@ const ChipDropdownInput = ({
    */
 
 
-  const onAddChip = event => {
+  var onAddChip = function onAddChip(event) {
     // Let's trigger only on enter, comma and space key press
     if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
-      if (!givenList.find(e => e.value === value)) {
+      if (!givenList.find(function (e) {
+        return e.value === value;
+      })) {
         setValue('');
         return;
       } // Let's prevent default action - adding new key to the value
@@ -226,11 +166,12 @@ const ChipDropdownInput = ({
    */
 
 
-  const onRemoveChip = (index, elementToAdd) => {
+  var onRemoveChip = function onRemoveChip(index, elementToAdd) {
     // Let's copy the chips
-    const newChips = [...chips]; // Let's delete the chip
+    var newChips = _toConsumableArray(chips); // Let's delete the chip
     // If necessary, let's replace it with a different chip
 
+
     if (elementToAdd) {
       newChips.splice(index, 1, elementToAdd);
     } else {
@@ -238,8 +179,8 @@ const ChipDropdownInput = ({
     } // Let's update the chip list
 
 
-    setChips([...newChips]);
-    onValueChange([...newChips]);
+    setChips(_toConsumableArray(newChips));
+    onValueChange(_toConsumableArray(newChips));
   };
   /**
    * Changes a status of the chip to edit.
@@ -248,7 +189,7 @@ const ChipDropdownInput = ({
    */
 
 
-  const onEditChip = (text, index) => {
+  var onEditChip = function onEditChip(text, index) {
     // Let's check if we have to add value as a chip (in case we have entered something in the input field)
     if (chipInput.current.value !== '') {
       // Let's replace the chip
@@ -263,43 +204,53 @@ const ChipDropdownInput = ({
     setValue(text);
   };
 
-  React.useEffect(() => {
-    let options = [...givenList];
+  React.useEffect(function () {
+    var options = _toConsumableArray(givenList);
 
     if (!restartFilter && value !== '') {
-      options = options.filter(option => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 || option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1);
+      options = options.filter(function (option) {
+        var _option$secondaryLabe;
+
+        return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 || option.secondaryLabel && ((_option$secondaryLabe = option.secondaryLabel) === null || _option$secondaryLabe === void 0 ? void 0 : _option$secondaryLabe.toUpperCase().indexOf(value.toUpperCase())) !== -1;
+      });
     }
 
     if (!disableSorting) {
       options = options.sort();
     }
 
-    options = options.filter(o => !chips.includes(o.value));
+    options = options.filter(function (o) {
+      return !chips.includes(o.value);
+    });
     setCurrentSearchResult(options);
   }, [value, givenList, chips]);
 
-  const handleValueUpdate = values => {
+  var handleValueUpdate = function handleValueUpdate(values) {
+    var _chipInput$current;
+
     setRestartFilter(true);
     addChip(values[0]);
-    chipInput?.current?.focus();
+    chipInput === null || chipInput === void 0 ? void 0 : (_chipInput$current = chipInput.current) === null || _chipInput$current === void 0 ? void 0 : _chipInput$current.focus();
   };
 
-  const handleKeyPress = e => {
-    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {
+  var handleKeyPress = function handleKeyPress(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
       if (e.keyCode === 13) {
-        const matches = currentSearchResult?.filter(c => c.value.toLowerCase() === value.toLowerCase());
+        var matches = currentSearchResult === null || currentSearchResult === void 0 ? void 0 : currentSearchResult.filter(function (c) {
+          return c.value.toLowerCase() === value.toLowerCase();
+        });
 
-        if (matches?.length === 1
+        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 1
         /*&& onSelect*/
         ) {
           addChip(matches[0].value); //onSelect(chips);
-        } else if (e.target.value === suggestion?.label) {
+        } else if (e.target.value === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label)) {
           addChip(e.target.value);
         }
 
         setDropdownIsOpen(!dropdownIsOpen);
 
-        if (matches?.length === 0) {
+        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 0) {
           setValue('');
         }
       } else if (e.keyCode === 40) {
@@ -308,22 +259,24 @@ const ChipDropdownInput = ({
     }
   };
 
-  const handleClickOutside = e => {
-    if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {
+  var handleClickOutside = function handleClickOutside(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && !styledFieldRef.current.contains(e.target)) {
       if (dropdownIsOpen) {
         setDropdownIsOpen(false);
 
-        if (!givenList.find(e => e.value === value)) {
+        if (!givenList.find(function (e) {
+          return e.value === value;
+        })) {
           setValue('');
         }
       }
     }
   };
 
-  React.useEffect(() => {
+  React.useEffect(function () {
     document.addEventListener('keypress', handleKeyPress);
     document.addEventListener('click', handleClickOutside);
-    return () => {
+    return function () {
       document.removeEventListener('keypress', handleKeyPress);
       document.removeEventListener('click', handleClickOutside);
     };
@@ -332,93 +285,115 @@ const ChipDropdownInput = ({
    * Return Chip Input component.
    */
 
-  let dropdownItems = [];
-  if (currentSearchResult) dropdownItems = currentSearchResult.map(x => ({
-    value: x.value,
-    displayLabel: x.label,
-    noteLabel: x.secondaryLabel
-  }));
+  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
-  }, ...dropdownItems];
-  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(StyledChipInputContainer, {
-    id: inputId,
-    onClick: e => {
-      e.stopPropagation();
-      setDropdownIsOpen(true);
-      chipInput.current.focus();
-    },
-    className: validationType,
-    ref: styledFieldRef
-  }, /*#__PURE__*/React.createElement(Search, {
-    size: "24px",
-    className: "SearchIcon"
-  }), chips?.map((chip, index) => /*#__PURE__*/React.createElement(InputChip, {
-    icon: givenList.find(l => l.value === chip) ? 'User' : undefined,
-    size: Size.Medium,
-    variant: variants && variants?.length && variants[index] ? variants[index] : 'normal',
-    text: chip,
-    onRemove: () => onRemoveChip(index),
-    onClick: () => onEditChip(chip, index),
-    key: `chip_${index}`
-  })), /*#__PURE__*/React.createElement(ChipInput, {
-    type: "text",
-    onChange: event => {
-      setValue(event.target.value);
-      setRestartFilter(false);
-      setDropdownIsOpen(true);
-
-      if (onInputChange) {
-        onInputChange(event.target.value || '');
-      }
-    },
-    onKeyDown: event => {
-      onAddChip(event);
-    },
-    placeholder: placeholder && chips?.length === 0 ? placeholder : '',
-    onClick: e => {
-      e.stopPropagation();
-      setDropdownIsOpen(true);
-    },
-    onFocus: () => {
-      setDropdownIsOpen(true);
-    },
-    ref: chipInput
-  }), loading ? /*#__PURE__*/React.createElement(Loading, null, /*#__PURE__*/React.createElement(LoadingIndicator, {
-    size: Size.Small,
-    color: COLORS.neutral_600
-  })) : null), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/React.createElement(DropdownContent, {
-    customizationProps: {
-      action: () => {},
-      pinTopItem: true,
-      itemsType: 'normal',
-      scrollable: true,
-      actionLabel: '',
-      multiSelect: false,
-      onValueUpdate: handleValueUpdate,
-      items: dropdownItems
-    },
-    focused: focused,
-    setFocused: setFocused,
-    hideOnClickOutside: false,
-    selectedValues: [],
-    messageOnNoResults: messageOnNoResults ?? '',
-    setSelectedValues: () => {},
-    isOpen: dropdownIsOpen,
-    setIsOpen: setDropdownIsOpen,
-    filter: '',
-    isButton: false,
-    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, {
-    size: "20px",
-    color: COLORS.critical_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
+  }].concat(_toConsumableArray(dropdownItems));
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsxs(StyledChipInputContainer, {
+      id: inputId,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setDropdownIsOpen(true);
+        chipInput.current.focus();
+      },
+      className: validationType,
+      ref: styledFieldRef,
+      children: [/*#__PURE__*/_jsx(Search, {
+        size: "24px",
+        className: "SearchIcon"
+      }), chips === null || chips === void 0 ? void 0 : chips.map(function (chip, index) {
+        return /*#__PURE__*/_jsx(InputChip, {
+          icon: givenList.find(function (l) {
+            return l.value === chip;
+          }) ? 'User' : undefined,
+          size: Size.Medium,
+          variant: variants && variants !== null && variants !== void 0 && variants.length && variants[index] ? variants[index] : 'normal',
+          text: chip,
+          onRemove: function onRemove() {
+            return onRemoveChip(index);
+          },
+          onClick: function onClick() {
+            return onEditChip(chip, index);
+          }
+        }, "chip_".concat(index));
+      }), /*#__PURE__*/_jsx(ChipInput, {
+        type: "text",
+        onChange: function onChange(event) {
+          setValue(event.target.value);
+          setRestartFilter(false);
+          setDropdownIsOpen(true);
+
+          if (onInputChange) {
+            onInputChange(event.target.value || '');
+          }
+        },
+        onKeyDown: function onKeyDown(event) {
+          onAddChip(event);
+        },
+        placeholder: placeholder && (chips === null || chips === void 0 ? void 0 : chips.length) === 0 ? placeholder : '',
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          setDropdownIsOpen(true);
+        },
+        onFocus: function onFocus() {
+          setDropdownIsOpen(true);
+        },
+        ref: chipInput
+      }), loading ? /*#__PURE__*/_jsx(Loading, {
+        children: /*#__PURE__*/_jsx(LoadingIndicator, {
+          size: Size.Small,
+          color: COLORS.neutral_600
+        })
+      }) : null]
+    }), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/_jsx(DropdownContent, {
+      customizationProps: {
+        action: function action() {},
+        pinTopItem: true,
+        itemsType: 'normal',
+        scrollable: true,
+        actionLabel: '',
+        multiSelect: false,
+        onValueUpdate: handleValueUpdate,
+        items: dropdownItems
+      },
+      focused: focused,
+      setFocused: setFocused,
+      hideOnClickOutside: false,
+      selectedValues: [],
+      messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+      setSelectedValues: function setSelectedValues() {},
+      isOpen: dropdownIsOpen,
+      setIsOpen: setDropdownIsOpen,
+      filter: '',
+      isButton: false,
+      id: "".concat(inputId, "_dropdowncontent")
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_500
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
 };
 
 ChipDropdownInput.propTypes = {